如何將一個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（側面導航欄）的右側？

回答

相關問題