0

这是我上周遇到的一个问题的娱乐。我有 3 个盒子，想将其中的 2 个向左移动，以便它们适合其父盒子。我可以成功地移动它们，但 CSS 完全忽略了它们可以适应宽度并将最后一个框放在一个新行中，这完全破坏了外观。这是一个演示，我看到了 firefox 11 和 chrome 18 的问题。我怎样才能影响 css 以便 3 个框适合该行，因为它显然可以在进行左移时。

html（第二部分只是为了查看班次是否有效与没有班次。）

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>


<div class="A2">
    <div class="B2"></div>
    <div class="C2"></div>
    <div class="D2"></div>
</div>

的CSS

.A { width: 290px; height:200px; background-color: red; }
.B, .C, .D { width: 100px; height: 100px; }
.B, .D { background-color: green;}
.C { width: 100px; background-color: blue; }
.A div { float: left; }
.C, .D { position:relative; left: -50px; }


.A2 { width: 290px; height:200px; background-color: red; }
.B2, .C2, .D2 { width: 100px; height: 100px; }
.B2, .D2 { background-color: green;}
.C2 { width: 100px; background-color: blue; }
.A2 div { float: left; }
4

2 回答 2

6

好吧 3x100px > 290px，对吧？所以难怪第 3 个盒子会换行。

您需要记住，这position:relative 会保持元素的原始空间被占用。这就是为什么 3 个框不适合的原因，尽管您将 2 个框向左移动 50 像素。

编辑：

尝试使用position:absolute- 它将元素从文档流中取出（尽管这与 float “不兼容”）。除此之外，您需要调整子元素的宽度以适应父元素的宽度，反之亦然。

请记住，通过使用绝对定位或负边距，您的部分内容会被剪裁。最好使用正确的尺寸，所以一切都很合适。

例子

于 2012-05-14T20:16:03.040 回答
3

如果您希望它们全部放在一条线上，您可以使用负边距。

你有 10px 的额外空间要计算，所以你可能想要尽可能均匀地划分，像这样（3 个元素有点尴尬）：

.B{ margin-left: -3px; }
.C{ margin-left: -3px; }
.D{ margin-left: -4px; }

http://jsfiddle.net/M6uBk/15/

还有许多其他方法可以做到这一点，或者您可以以任何方式调整这些数字，使它们加起来为 10，这仅取决于您要显示的元素有多少，因为它不可能全部放入容器中。

于 2012-05-14T20:23:44.337 回答