1

我需要将文本推到它下面的 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;
}

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

4

5 回答 5

4

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

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

演示

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;
}
于 2013-10-23T10:46:19.667 回答
2

如果由于某种原因您无法更改 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/

于 2013-10-23T11:06:51.393 回答
2

干得好。

工作演示

CSS 变化：

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

希望这可以帮助。

于 2013-10-23T10:42:50.057 回答
2

尝试这个：

<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

希望它可以帮助你。

演示

于 2013-10-23T10:47:08.223 回答
1

I think it makes more sense to unfloat everything and position the button absolutely.

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;
}
于 2013-10-23T10:48:21.413 回答