Question

我有以下HTML：

<div class="outf">
    <h3 class="left">Text</h3>
    <h3 class="right">more text</h3>
    <p><h3 class="right">some more text/h3></p>
</div>

在CSS中我有：

.outf {border-color: #3377bb; border-style: double; border-width: 2px; 
   width: 750px; padding: 8px;}

.right {text-align: right; float: right;}

.left {text-align: left; float: left;}

我希望h3标题位于边框内，但由于某种原因，边框首先出现，文本显示在其下方。有谁知道这是为什么？感谢。

Answer 1

要解决此问题，请在overflow上设置div属性：

.outf { overflow:hidden; /* other definitions */ }

http://jsfiddle.net/2E5Jw/

有关该主题的更多信息 - http://www.quirksmode.org/css/clearing.html

Answer 2

你可以使用流动

overflow: auto;

在.outf div内部，这样它就会提供一个滚动条，当文本超出时，会导致div以声学方式扩展...

写overflow:hidden;会使你的文字隐藏在div ...

中

Answer 3

实际上，完整而正确的解决方案是clearfix。我认为这也是最终文章：http://perishablepress.com/new-clearfix-hack/ http://jsfiddle.net/ZJHEe/

Answer 4

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/CqJVs/

演示：http://jsfiddle.net/CqJVs/embedded/result/

它只是一个浮动问题。问题解决了。

文本不会进入HTML的边框内部

4 个答案: