0

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

我有一个网站，它使用 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 下方，因为没有足够的空间。我不能浮动 .sideNav 并留出 240px 的左边距，因为有时 .sideNav 不会在那里，无论如何要解决这个问题并找到一个平衡点，以便内容在他的页面上很好地流动......

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

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

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

4

2 回答 2

1

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

于 2012-05-29T12:22:50.877 回答
0

如果列表中的所有图像尺寸相同，请将它们设置为

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

而不是在每个图像上都具有相同的样式。

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

于 2012-05-29T12:27:25.450 回答