我想在另一个 div 旁边 float 一个 div。但无法实现这一点，两个 div 之间有一个空白区域，而且 float 也没有达到我想要的方式。
https://jsbin.com/fevuteseja/edit?html,css
我想做的是，让右边的 div float 到与它之前结束的 div 相邻的位置，并且也从同一层开始
body, div, h1, span, code, p, mark, em, ul, li {margin:0px; padding:0px}
body {background-color:slategray}
.topnav {height:30px;}
.topnav ul{
list-style-type:none;
background-color:#404040;
height:30px;
}
.topnav ul li {float:left;}
.topnav ul li a {
display:block;
color:white;
text-decoration:none;
padding:6px 15px 4px;
font-family:calibri;
font-size:13px;
height:20px;
}
.topnav ul li a:hover {background-color:#3399ff}/*background-color:black;*/
.sidenav {width:12%;position:fixed;height:100%;}
.sidenav ul {
list-style-type:none;
width:12%;height:100%;position:fixed;
background-color:#f2f2f2;
}
.sidenav ul li a{
display:block;
padding: 5px 0px 5px 15px;
text-decoration:none;
color:black;
font-family:calibri;
font-size:11.0px;
letter-spacing: 1.5px
}
.sidenav li a:hover:not(.active) {
background-color:#bfbfbf;
color:white
}
.sidenav ul li a.active {
background-color:#3399ff;
color:white;
}
.sidenav_heading {display:block; padding:5px 5px; margin:2px; font-family:calibri}
.blank{margin-left:12%;height:15px;background-color: aqa}
.container-main{font-family:calibri; margin-left:12%; display:inline-block; width:550px;padding-bottom:20px;background-color:hotpink}
.container-main h1{width:530px;margin-bottom:15px;margin-left:20px;background-color: chartreuse}
.container-main-block{margin-left:20px;padding-bottom:10px;padding-top:10px;border-left:3px solid #339cff;background-color:#e6f3ff}
.container-main p{width:500px;padding-left:12px;}
mark {background-color:#99b3ff;color:white}
.container-example{background-color:blue;display:inline-block;margin-top:0px;}<!doctype html>
<html>
<head>
<title>Webden</title>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html, charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="topnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="">About</a></li>
</ul>
</div>
<div class="sidenav">
<ul>
<span class="sidenav_heading">CSS Tag Reference</span>
<li><a href="1.html" class="active">Background</a></li>
<li><a href="2.html ">Borders</a></li>
<li><a href="">Color</a></li>
</ul>
</div>
<div class="blank"></div>
<div class="container-main">
<h1>CSS Backgrounds</h1>
<div class="container-main-block">
<p>Background property helps to achieve control over the background properties of any element in HTML.</p>
<p><mark><em>background:</em></mark> is a shorthand property, that can be used as shown besides.</p>
</div>
</div>
<div class="container-example">
<h1>background-color:red</h1>
</div>
</body>
</html>最佳答案
请使用这个:
.container-main {
background-color: hotpink;
display: inline-block;
float: left;
font-family: calibri;
margin-left: 12%;
padding-bottom: 20px;
width: 550px;
}
关于html - css float error, element doesn't float adjacent to the div preceding，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35961305/