Question

我正在使用：

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

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

任何帮助都是适用的。

Answer 1

最好将 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/

Answer 2

你的问题不清楚。

如果你想要所有四个div（以及你为什么使用div而不是＆lt; img＆gt;？）保持连续，如果浏览器窗口太小则不要包裹在下面的行上，那么你可以尝试（假设图像宽度为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应保持相同的顺序

Answer 3

你的问题不明确。据我所知。检查这些属性max-width，min-width，max-height和min-height。这些属性永远是网页设计师的朋友，因为这将保持网页布局稳定。 click here to learn more about them.。如果我们给你答案，你将无法理解他们使用的深层概念。尝试给出max和min属性的接近值。

使用float和div时如何定位固定？

3 个答案: