Question

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

我的网站使用javascipt来调整依赖于屏幕relsolution的固定包装，因此所有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下方，因为没有足够的空间。我不能漂浮.sideNav并留下240px的左边距，因为有时.sideNav不会在那里，是否有任何方法来解决这个问题并找到一个平衡点，以便内容在他页面上很好地流动......

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

我可以在必要时发布完整标记和css

只想提前感谢任何可以提供帮助的人！

Answer 1

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

Answer 2

如果列表中的所有图片尺寸相同，请使用

进行设置

.item img { width: 240px; height: 180px; }

而不是在每张图片上都使用相同的样式。

实际上最好在img中设置width =“240”和height =“180”以减少页面加载时间，即“告诉”浏览器图像的确切尺寸。

css在固定宽度内漂浮2个兄弟姐妹，而一个兄弟姐妹包含推动兄弟姐妹的椭圆

2 个答案: