Question

我在这里有这个jsfiddle：http://jsfiddle.net/sqszH/1/

基本上，我要做的是将Hello World文本放在其下面的“long long long long”文本的下方。有没有办法在不更改HTML的情况下执行此操作？

因为我在网页上有类似的情况，但我无法弄清楚我的生活。它可能也非常简单。也许有人可以帮我一把？那太棒了！

HTML：

<div class="test">
<div class="first-span">first span</div>
    <div class="second-span">some long long long long long long long long long long text<br /><span>Hello World</span></div>
    <br class="clear" />
</div>

CSS：

.test{
    width:100%;
}
.first-span{
    border:1px solid red;
    box-sizing: border-box;
    float: left;
    padding-right: 1em;
}
.second-span{
    box-sizing: border-box;
    border:1px solid blue;
}
.clear
{
 clear: both;   
}

Answer 1

将display类的second-span属性设置为table

.second-span{
    box-sizing: border-box;
    border:1px solid blue;
    display: table;
}

example

Answer 2

添加height: 4em;

.first-span{
    border:1px solid red;
    box-sizing: border-box;
    float: left;
    padding-right: 1em;
    height: 4em;
}

http://jsfiddle.net/sqszH/4/

Answer 3

编辑的解决方案，因为我误解了这个问题：

如果您知道第二跨度div的宽度，也可以将其向左浮动。然后你会在loooong文本下面有“hellow world”文本。

如果没有，你可以选择如上所述在拳头上设置高度或更改html。

HTML <br/>标签中断显示：块

3 个答案: