所有DIV elementes是在同一類同一

Question

HTML

div.section{ 
 
/*border style code is skipped on this post*/ 
 
    background-color: #99CCFF; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    text-align: justify; 
 
    text-justify : auto; 
 
    overflow: hidden; 
 

 
} 
 
.topic{ 
 
/*border style code is skipped on this post*/ 
 
} 
 
p{ 
 
    overflow: hidden; 
 
} 
 

 
img{ 
 
    float: right; 
 
} 
 

 
div#navi{ 
 
    /*border style code is skipped on this post*/ 
 
    margin: 5px; 
 
    width: 200px; 
 
    color: gray; 
 
    float: left; 
 
} 
 

 
div#navi h1{ 
 
    text-align: left; 
 
    padding-left:10px; 
 
} 
 

 
div#navi ul{ 
 
margin-left: 0px; 
 
}

<div id="body"> 
 
    <div id="navi"> 
 
     <h1>Links</h1> 
 
     <ul> 
 
      <li><a href="http://lab.com/">Lab.</a></li> 
 
      <li><a href="http://cse.univ.com/">CSE @ UNIV</a></li> 
 
      <li><a href="http://www.w3schools.com/">W3Schools</a></li> 
 
      <li><a href="http://www.csszengarden.com/"> Garden</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="section"> 
 
     <h2><span class="topic">Cars</span>: 67 Shelby Mustang GT500 Convertible</h2> 
 
     <p> 
 
      <img src="67eleanorConv.jpg" alt="1967 shelby Mustang GT500 Convertible" title="1967 shelby Mustang GT500 Convertible" /> something..something..something..something.. 
 
     </p> 
 
    </div> 
 
    <div class="section"> 
 
     <h2><span class="topic">Sports</span>: Snowboarding</h2> 
 
     <p> 
 
      <img src="daaa.jpg" alt="Travis Rice Snowboard Jump" title="Travis Rice Snowboard Jump" /> something..something..something..something..something.. 
 
     </p> 
 
    </div> 
 
    <div class="section"> 
 
     <h2><span class="topic">Music</span>: Funk &amp; Punk Rock</h2> 
 
     <p> 
 
      <img src="lesPaulBass.jpg" alt="Gibson Les Paul Bass" title="Gibson Les Paul Bass" /> something..something..something..something.. 
 
      <br/> 
 
      <br/> something..something..something..something.. 
 
     </p> 
 
    </div> 
 
</div>

代碼的設置寬度是如此的長，所以我刪除的邊框樣式在CSS的部分。
我將div（id = nav）和div（id = section）換成div（id = body）
我使用「overflow =」隱藏「設置導航div左側的div大小。
但是我不能設置其他字段
第二列的佈局必須是液體佈局 - 也就是說，當瀏覽器尺寸發生變化時，它的所有部分都應相應調整尺寸

此處我張貼鏈接在東西我有，我想：

Result that I wanna make

Current result of mine

Answer 1

回答你的解決方案應該是設置導航欄，以絕對定位。這樣它將始終延伸父母的整個身高。然後，您需要將position:relative設置爲父div#body，最後，需要調整這些部分以偏移導航欄，所以我通過添加CSS屬性margin-left:220px來實現此目的。

CSS：

div#navi { 
    /*border style code is skipped on this post*/ 
    margin: 5px; 
    width: 200px; 
    color: gray; 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:0px; 
} 

div#body { 
    position:relative; 
} 

div.section { 
    /*border style code is skipped on this post*/ 
    background-color: #99CCFF; 
    padding: 5px; 
    margin-top: 10px; 
    text-align: justify; 
    text-justify: auto; 
    overflow: hidden; 
    margin-left:220px; 
} 

---

div#body { 
 
    position:relative; 
 
} 
 

 
div.section { 
 
    /*border style code is skipped on this post*/ 
 
    background-color: #99CCFF; 
 
    padding: 5px; 
 
    margin-top: 10px; 
 
    text-align: justify; 
 
    text-justify: auto; 
 
    overflow: hidden; 
 
    margin-left:220px; 
 
} 
 

 
.topic { 
 
    /*border style code is skipped on this post*/ 
 
} 
 

 
p { 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    float: right; 
 
} 
 

 
div#navi { 
 
    /*border style code is skipped on this post*/ 
 
    margin: 5px; 
 
    width: 200px; 
 
    color: gray; 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
    bottom:0px; 
 
} 
 

 
div#navi h1 { 
 
    text-align: left; 
 
    padding-left: 10px; 
 
} 
 

 
div#navi ul { 
 
    margin-left: 0px; 
 
}

<div id="body"> 
 
    <div id="navi"> 
 
    <h1>Links</h1> 
 
    <ul> 
 
     <li><a href="http://lab.com/">Lab.</a></li> 
 
     <li><a href="http://cse.univ.com/">CSE @ UNIV</a></li> 
 
     <li><a href="http://www.w3schools.com/">W3Schools</a></li> 
 
     <li><a href="http://www.csszengarden.com/"> Garden</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="section"> 
 
    <h2><span class="topic">Cars</span>: 67 Shelby Mustang GT500 Convertible</h2> 
 

 
    <p> 
 
     <img src="67eleanorConv.jpg" alt="1967 shelby Mustang GT500 Convertible" title="1967 shelby Mustang GT500 Convertible" /> something..something..something..something.. 
 
    </p> 
 
    </div> 
 
    <div class="section"> 
 
    <h2><span class="topic">Sports</span>: Snowboarding</h2> 
 

 

 
    <p> 
 
     <img src="daaa.jpg" alt="Travis Rice Snowboard Jump" title="Travis Rice Snowboard Jump" /> something..something..something..something..something.. 
 
    </p> 
 
    </div> 
 

 
    <div class="section"> 
 
    <h2><span class="topic">Music</span>: Funk &amp; Punk Rock</h2> 
 
    <p> 
 
     <img src="lesPaulBass.jpg" alt="Gibson Les Paul Bass" title="Gibson Les Paul Bass" /> something..something..something..something.. 
 
     <br/> 
 
     <br/> something..something..something..something.. 
 
    </p> 
 
    </div>

---