我有 3 个div，其中包含顶部导航、侧导航和主要内容的元素(按该顺序出现在源代码中)。如何将主要内容放置在侧面导航的右侧？
div .header {
display: inline-block;
}
div .logo {
float: left;
margin-right: 210px;
}
#search-text {
float: left;
width: 550px;
margin-right: 50px;
}
div .top-right-nav {
float: left;
}
div .side-nav {
float: left;
display: inline;
width: 300px;
}
div .user-pic img {
width: 200px;
height: 200px;
border: 2px solid rgba(31, 127, 92, 0.2);
border-radius: 6px;
align: left;
}
div .user-content {
width: 200px;
height: 200px;
margin-bottom: 5px;
border: 2px solid rgba(31, 127, 92, 0.2);
list-style-type: none;
}
div .user-content ul {
list-style-type: none;
}
div .trending {
width: 200px;
height: 200px;
border: 2px solid rgba(31, 127, 92, 0.2);
list-style-type: none;
}
div .trending ul {
list-style-type: none;
}
.main-content {
float: left;
}<div class="header">
<div class="logo" class="header">
<a href="#"><img src="#" alt="Logo" /></a>
</div>
<div class="search-bar" class="header">
<form action="#" method="get">
<input type="text" name="search_text" id="search-text" placeholder="Search" />
</form>
</div>
<div class="top-right-nav" class="header">
<a href="#">Home</a>
<a href="#">Notification</a>
<a href="#">Profile and settings</a>
</div>
</div>
<div class="side-nav">
<div class="user-pic">
<br />
<br />
<br />
<img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
<div class="user-content">
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
</ul>
</div>
<div class="trending">
<ul>
<li><a href="#">eggs</a></li>
<li><a href="#">turkey</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="cover-pic">
<img src="http://www.hdfbcover.com/randomcovers/covers/never-stop-dreaming-quote-fb-cover.jpg">
</div>
</div>我想将显示"永不停止梦想"的图像和所有后续元素(未出现在此代码中)放在侧面导航的右侧。
试试这个，我将侧边导航和主要内容包装在一个div 中，然后在包装器之前添加一个带有clear:both的div，并稍微调整了样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.header {
}
.logo {
float: left;
margin-right: 210px;
}
#search-text {
float: left;
width: 550px;
margin-right: 50px;
}
.top-right-nav {
float: left;
}
.side-nav {
float: left;
width: 300px;
background-color: red;
}
.user-pic img {
width: 200px;
height: 200px;
border: 2px solid rgba(31, 127, 92, 0.2);
border-radius: 6px;
align: left;
}
.user-content {
width: 200px;
height: 200px;
margin-bottom: 5px;
border: 2px solid rgba(31, 127, 92, 0.2);
list-style-type: none;
}
.user-content ul {
list-style-type: none;
}
.trending {
width: 200px;
height: 200px;
border: 2px solid rgba(31, 127, 92, 0.2);
list-style-type: none;
}
.trending ul {
list-style-type: none;
}
.main-content {
float: left;
}
</style>
</head>
<body>
<div class="header">
<div class="logo" class="header">
<a href="#"><img src="#" alt="Logo" /></a>
</div>
<div class="search-bar" class="header">
<form action="#" method="get">
<input type="text" name="search_text" id="search-text" placeholder="Search" />
</form>
</div>
<div class="top-right-nav" class="header">
<a href="#">Home</a>
<a href="#">Notification</a>
<a href="#">Profile and settings</a>
</div>
</div>
<div style="clear: both;"></div>
<div>
<div class="side-nav">
<div class="user-pic">
<br />
<br />
<br />
<img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
<div class="user-content">
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
</ul>
</div>
<div class="trending">
<ul>
<li><a href="#">eggs</a></li>
<li><a href="#">turkey</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="cover-pic">
<img src="http://www.hdfbcover.com/randomcovers/covers/never-stop-dreaming-quote-fb-cover.jpg">
</div>
</div>
</div>
</body>
</html>