1

我在用：

 <div class="class1">Image</div>
 <div class="class2">Image</div>
 <div class="class3">Image</div>
 <div class="class4">Image</div>

我使用图像作为背景，它们都应该在同一行（所有图像）。我正在使用float:left其中两个图像float:right。但是当浏览器调整大小时，我的问题就开始了。所有图像将在不同的行中混乱。

任何帮助都会受到重视。

4

3 回答 3

0

最好将min-width定义为父 DIV。

例如这样写：

.parent{
    overflow:hidden;
    min-width:800px;
}
.parent > div{
    width:200px;
    height:100px;
    background:red;
}
.class1,.class2{float:left}
.class3,.class4{float:right}

检查这个http://jsfiddle.net/nRhed/

于 2012-09-21T11:54:56.773 回答
0

你的问题不清楚。

如果您希望所有四个 div（以及为什么使用 div 而不是 <img>？）保持连续，并且如果浏览器窗口太小则不换行到下面的行，那么您可以尝试（假设200px 的图像宽度 - 为简单起见，使用样式而不是类 - 这不适合部署！）：

<div style="width:800px">
  <div class="class1">Image</div>
  <div class="class2">Image</div>
  <div class="class3">Image</div>
  <div class="class4">Image</div>
</div>

这将强制容器 div 足够宽以连续包含所有四个图像。但是，如果浏览器的宽度不足以显示它们，您将看到一个水平滚动条（从用户体验的角度来看，这并不好）

或者，使用您当前的 HTML，然后将它们全部浮动。如果调整浏览器窗口的大小，则最后一张图片将放在下一行，并且 div 应保持相同的顺序

于 2012-09-21T11:55:03.927 回答
0

Your question is not clear. As far as I understood it. Check these properties max-width,min-width, max-height and min-height. These properties are friends forever to a web designer because these will keep web layout steady. click here to learn more about them.. If we give answer to you, you will not understand the deep concept of their use. Try to give close values to max and min properties.

于 2012-09-21T11:59:12.053 回答