Question

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

注意：您正在查看左侧。

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;
}

我试图浮动文本，更改显示甚至只是缩小它但是我想要一个很好的方法来做到这一点。任何帮助都会很棒，欢呼所有人！

Answer 1

实际上我想指出你的DOM结构不正确，考虑使用子包装器，float一个用于left，另一个用于right。

您遇到该问题的原因是h2已浮动，span为inline，因此它将位于h2旁边。如果未分配display: block;，则分配right会导致width块被推下。更好地考虑更改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;
}

Answer 2

你走了。

<强> WORKING DEMO

CSS更改：

span{
     display:block;
     clear:both;
     margin-bottom: -40px;
}

希望这有帮助。

Answer 3

试试这个：

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

CSS：

.left {
    float:left;
}

我已使用.left左对齐标题和文字，并清除.item上的浮动广告。并从float:left

中删除了h2

希望它对你有所帮助。

DEMO

Answer 4

如果由于某种原因您无法更改HTML标记，则可以尝试以下CSS：

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

.item span {
    font-size: 10px;
    float: left;
    clear: both;
    margin-right: 60px;
}

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

.button {
    width: 50px;
    height: 50px;
    border: #000000 solid 1px;
    background: gray;
    position: absolute;
    top: 5px;
    right: 5px;
}

由于.item具有固定的高度，您还可以修复.button的高度，例如50px。

现在可以使用绝对位置将按钮放在右侧（向上和向右偏移5px）。

对于span，您可以float: left并使用clear: both强制它在h1之后开始换行。

但是，我还要添加60px的右边距，以确保更长的测试不会与按钮冲突。

请参阅演示：http://jsfiddle.net/audetwebdesign/tNd2s/

Answer 5

我认为卸下所有东西并绝对定位按钮更有意义。

JSFiddle Demo

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

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

h1 {
    text-align: left;
    font-size: 18px;
}

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

.button {
    position:absolute;
    top:5px;
    right:1%;
    width: 50px;
    height: 60px;
    border: #000000 solid 1px;
    background: gray;
}

浮动H2 - 需要按下面的文字

5 个答案: