javascript - css 在固定宽度内 float 2 个 sibling ，一个 sibling 包含插入 sibling 的 ellments

Question

很难解释我遇到的这个问题，因为有很多变数。

我的网站使用 javascipt 根据屏幕分辨率调整固定包装的大小，因此所有 div 都必须调整为 3 种不同的宽度，这就是使这个问题如此困难的原因..

HTML

<div id="wrap" >
  <div id="content">
    <div class="sideNav" >/* This is not static in the markup so when its not in the markup the rest of the content will take its space as everything is 240px in width*/
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
    <div class="contentContainer">/* this needs to resize to  */
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
        <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>    
    </div>
  </div>
</div>

CSS

.wrap {
  width: 960px; or width: 1110px; or width: 1350px depending on screen res; /* all sizes which would fix 240px 4,5 or 6 times across*/
}
.sideNav {
width: 240px;
float: left;
}
contentContainer {
float: left;
}
.item {
width: 240px;
width: 180px;
}

很明显，一旦有超过 3 个元素，.contentContainer 就会被推到 .sideNav 下面，因为没有足够的空间。我不能 float .sideNav 并留出 240px 的左边距，因为有时 .sideNav 不会在那里，是否有办法解决这个问题并找到一个平衡点，以便内容在他的页面上很好地流动......

我现在只学习了 2 个月的 css，所以他们可能是我不知道的解决方案......我真的不知道或不了解 css LESS，但也许那里有答案？

如有必要，我可以发布完整的标记和 CSS

只想提前对任何能提供帮助的人表示感谢!

Answer 1

您可以为元素使用百分比，例如 .time{ width: 20%}。它们根据您的 .contentContainer-Elements 宽度调整大小，您可以将其设置为 width: 100%。注意您的填充和边距，因为它们在默认浏览器框模式下加起来就是您的宽度。