1つのdiv（メインコンテンツ）の要素を別のdiv（サイドナビゲーションバー）の右側に移動するにはどうすればよいですか？

トップナビゲーション、サイドナビゲーション、メインコンテンツ（ソースコード内でこの順番で表示されます）の要素を含む3つのdivがあります。メインコンテンツをサイドナビの右側に配置するにはどうすればよいですか？1つの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

私は少しラッパー前clear:bothでのdivを追加し、その後、サイド・ナビゲーションと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>

出典

2017-02-28 02:21:26 Swellar

1つのdiv（メインコンテンツ）の要素を別のdiv（サイドナビゲーションバー）の右側に移動するにはどうすればよいですか？

答えて

関連する問題