Wie verschiebe ich die Elemente eines Div (Hauptinhalts) rechts von einem anderen Div (Seitennavigationsleiste)?

Ich habe 3 divs, die Elemente für den oberen nav, side nav und Hauptinhalt enthalten (erscheinen in dieser Reihenfolge im Quellcode). Wie platziere ich den Hauptinhalt rechts neben dem seitlichen Navigationsbereich?Wie verschiebe ich die Elemente eines Div (Hauptinhalts) rechts von einem anderen Div (Seitennavigationsleiste)?

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>

Ich mag das Bild setzen, die „nie aufhören zu träumen“ und alle nachfolgenden Elemente sagt rechts von der Seite nav (die in diesem Code nicht angezeigt).

Quelle

2017-02-25 dezvjosh

Bitte zeigen Sie uns den Quellcode . –

Ich habe die Frage bearbeitet, um den Quellcode einzuschließen. – dezvjosh

Versuchen Sie dies, wickelte ich den Neben nav und den Hauptinhalt in einem div, dann einen div mit clear:both vor dem Wrapper hinzugefügt und angepasst, um den Stil ein wenig:

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

Quelle

2017-02-28 02:21:26 Swellar

Wie verschiebe ich die Elemente eines Div (Hauptinhalts) rechts von einem anderen Div (Seitennavigationsleiste)?

Antwort

Verwandte Themen