Question

我正在处理一个复杂网页的一小部分，其中有一些我没有直接控制的div放在页面的右侧。因此，当我使用clear：两者（如建议here）强制我的div到下一行时，它将跳过页面右侧的内容 - 这是我不想要的。 / p>

这是一个小提琴，是我的代码的精简版 - 希望包含相关部分：

我希望下面的'下面的文字'显示在下一行。我清楚地知道：两者都会这样做，但正如我所说的那样，它与页面的其他部分交互得不好。

我的整个小部件需要包装在div中，否则我可以将文本放在div包装器之外，它会显示出来。我在那里的div提供了我需要的精确填充 - 大多数部分都需要填充，所以我不能真正删除div，虽然我可以添加一些div，只要它们不会弄乱我的其他格式（换行）长文本，堆叠按钮和文本宽度等。）。

我确实需要这个才能在所有浏览器上运行，即使没有启用JavaScript也应该正确显示。

以下是完整代码：

CSS：

.images {
    float:left;
    border:1px solid black;
    height: 100px;
    padding:6px;
}
.underneath {
    display: inline-block;
    float: left;
    width: 100%;
}
.rightcol {
    float: right;
    border:1px solid black;
    height: 200px;
}
.row {
    border:1px solid black;
    padding:5px;
}
.text {
    padding:10px;
}
.buttonstack {
    border:1px solid black;
    display: inline-block;
}
.button {
    border:1px solid red;
}
.wrapper {
}

HTML

<div class='row'>
    <div class='rightcol'>stuff on right</div>
    <div>
        <div class='images'>images</div>
        <div> <span class='text'> long text long text long text long text long text  long text long text long text long text long text
    </span>

            <div class='buttonstack'>
                <div class='button'>button</div>
                <div class='button'>button2</div>
            </div>
        </div>
    </div>
    <div class='underneath'>text underneath</div>
</div>

注意：我已经更新了我的小提琴来演示右侧的div，这更接近于我的页面。

Answer 1

您可以使用以下样式：

.underneath {
  float: left;
  width: 100%;
}

Fiddle

Answer 2

.divinquestion { 
   // your sweet styles
   display:inline-block; // add this
}

Answer 3

尝试将此添加到您的.row

float:left;
height:100%;

所以它会是

.row {
border:1px solid black;
padding:5px;
float:left;
height:100%;

}

Answer 4

看起来我找到了答案，clear: left添加到.underneath就可以了，就像这样：

.underneath {
    clear: left;
}

如何让div显示在下一行而不使用clear：both

4 个答案: