html - Float H2 - 需要将文本推到下方

Question

我需要将文本推送到其下方的 H2 旁边。不知道为什么我不能解决这个问题，但任何帮助都会很棒。

注意:您正在看左侧。

Fiddle Here

HTML:

 <div class="item">
            <h2>Item 1</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
            <div class="button">Button</div>
        </div>

CSS:

.item {
    height: 60px;
    width: 98%;
    border: #000000 solid 1px;
    margin-bottom: 10px;
    padding: 5px;
}

.item span {
    font-size: 10px;
}

h2 {
    text-align: left;
    font-size: 14px;
    margin: 0;
    float: left;
}

.button {
    width: 50px;
    height: 98%;
    border: #000000 solid 1px;
    background: gray;
    float: right;
}

我曾尝试 float 文本，甚至只是将其缩小以更改显示，但我想要一个好的方法来做到这一点。任何帮助都会很棒，干杯!

Answer 1

实际上我想指出您的 DOM 结构不正确，请考虑使用子包装器，float一个到left和其他right .

您遇到该问题的原因是，h2 float ，span是inline所以它会坐在你的旁边 h2 .正在分配 display: block;将导致您的 right如果 width 则要向下推的 block 未分配。最好考虑更改 DOM，我在下面分享了我的解决方案。

Demo

HTML

<div class="box clear">
    <div>
        <h2>Item 1</h2>
        <span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div></div>
</div>

CSS

.box {
    border: 1px solid #f00;
    width: 550px;
}

.box > div:nth-of-type(1) {
    float: left;
    width: 400px;
}

.box > div:nth-of-type(2) {
    float: right;
    width: 100px;
    height: 100px;
    border: 1px solid #0f0;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}