如何将一个div（主要内容）的元素移动到另一个div（侧面导航栏）的右侧？

我有3个div包含顶级导航，侧导航和主要内容（在源代码中的顺序出现）的元素。如何将主要内容放置在侧边导航的右侧？如何将一个div（主要内容）的元素移动到另一个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>

我希望把他们说：“从来没有停止梦想”和随后的所有元素（即不会出现在这个代码）到侧导航栏右侧的图像。

来源

2017-02-25 dezvjosh

请告诉我们的源代码。 –

我编辑了问题以包含源代码。 – dezvjosh

试试这个，我包了边导航和一个div的主要内容，然后在包装前添加一个div clear:both，并调整了风格有点：

<!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>

来源

2017-02-28 02:21:26 Swellar

如何将一个div（主要内容）的元素移动到另一个div（侧面导航栏）的右侧？

回答

相关问题