Question

HTML

＆＃13;

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;
}

＆＃13;

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

＆＃13;

代码太长了，所以我删除了css中边框样式的一部分我将div（id = nav）和div（id = section）包装成div（id = body）
我使用＆＃34; overflow =＆＃34; hidden＆＃34 ;.设置了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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

设置与同一类

1 个答案: