HTML <br />标记符显示：块

我有这样的jsfiddle这里：http://jsfiddle.net/sqszH/1/HTML <br />标记符显示：块

基本上，我正在试图做的是让世界您好文本，直接来到了“很长很长很长很长”文本的下方在它下面。有没有办法做到这一点，而无需更改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; 
}

来源

2013-03-31 Solomon Closson

好吧，我实际上已将此更改为'box-sizing：border-box'而不是'display：block'，但它们的作用相同。我知道这些不是跨度，他们是divs。 –

我没有得到你想要的东西？您如何定位Hello世界文本？ – KKetch

如何在“第一个跨度”文本右侧的非常长的文本下面找到它？因为现在，我正在看到“Hello World”正好位于“first span”文本的正下方。 –

设定的的display财产second-span类table

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

example

来源

2013-03-31 21:56:05

哇，我觉得哑巴，感谢脑汁！ –

添加height: 4em;

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

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

来源

2013-03-31 21:55:48

谢谢，但如果你不知道身高呢？例如，如果它在不同的浏览器上有所不同？ –

我不知道身高，我只是把它做得足够大而已。无论如何，我更喜欢@ axrwkr的解决方案。 –

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

，如果你知道你的第二个跨度div的宽度，漂浮它离开了。那么你将在loooong文本下面有“hellow world”文本。

如果没有，您可以选择像前面提到的那样设置拳头高度或更改html。

来源

2013-03-31 21:59:15 roman

不，我不希望它在那里。我希望它在'div'的其余部分内。史蒂夫韦伦斯明白，但如果我不知道身高呢？ –

你知道第二跨度div的宽度吗？如果是这样的话，它也会离开，你得到你想要的。 – roman

HTML <br />标记符显示：块

回答

相关问题