1

我希望我不是css的初学者，但我不明白为什么会发生以下情况......

你可以在这里看到一个例子

我希望在同一“行”上显示 2 个分隔的 div：

  • 第一个 div 必须 100% 宽度到第二个
  • 第一个 div 最右边的第二个 div

所以，我做了以下

// CSS
.div2 {
    background:#EDEDED;
    float:right;    
}
.div1  {    
    background:#CCC;
}
.div1, .div2 {
    padding:4px;
    margin:4px;
}
.round {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>

但是 .div2 在第一个 div 里面... 显示不良

如何显示如下内容？（就像我认为它应该显示...） 良好的显示

任何帮助表示赞赏...

编辑：解决方案 by user570783

.div1 {overflow:hidden;}

像魅力一样工作，但没有真正记录，为什么这样有效？

4

2 回答 2

2

浮动做所说的。漂浮。因为东西可以在它下面。文本将被换行，但边框不会

如果你知道“Test 2”的宽度，你可以添加一个“margin-right: x;”

于 2012-05-06T23:39:31.633 回答
2

好的，这里有很多解决方案，包括浮动、内联块、边距和边框，但都需要了解至少一个元素的大小。

然而！

你可以在这里做一个技巧。如果将 'overflow:hidden' 添加到第一个 div ，它将强制 div '块格式化上下文'

这将获得您所追求的结果，具有动态大小的右浮动元素。

要在 IE5 和 6 中进行这项工作，您需要在第一个元素上触发“hasLayout”，因此 position: relative;

小提琴

于 2012-05-07T00:45:42.467 回答