Question

我需要一个由左右两部分组成的<section></section>。左边的部分只是一个字符串 - 日期。正确的部分应包含以下内容：

<span>title</span>
<p>a lot of text of variable lenght</p>

我应该在一个部分中使用<div>吗？右侧部分的文本应仅保留在右侧部分（因此我不能单独在左侧部分使用float:left;）。

这是我的解决方案，没有<section> s，但它不适用于100％，文本在10px的高度后向左移动（参见下面的代码）。

    <div style="overflow: hidden; border: 1px solid red; padding:5px; ">
        <div style="float: left; width: 100px; height: 10px; color:blue;">right</div>
        <div style="">
            <span style="color:blue;">Lorem ipsum</span>
            <p>a lot of text of variable lenght</p>
        </div>
    </div>

如果找到一些代码，我如何优化代码并使其成为没有错误的HTML5？

Answer 1

只需在右侧部分使用margin-left:100px;，然后摆脱左侧的高度（example）：

<section style="display:block; overflow: hidden; border: 1px solid red; padding:5px; ">
    <aside style="display:block; float: left; width: 100px; color:blue;">right</aside>
    <div style="margin-left:100px;">
        <span style="color:blue;">Lorem ipsum</span>
        <p>a lot of text of variable lenght</p>
    </div>
</section>

Answer 2

如果float: left'一个div，您应该float: right;另一个，以便在某些版本的Internet Explorer和其他浏览器中正确显示。

Answer 3

现代风格是使用CSS3框模型（example）：

<style type="text/css">
#horbox {
    display: -webkit-box;
    display: -khtml-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -khtml-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    box-orient: horizontal;
}
</style>
<div id="horbox" style="border: 1px solid red; padding:5px;">
    <div style="width: 100px; color:blue;">right</div>
    <div>
        <span style="color:blue;">Lorem ipsum</span>
        <p>a lot of text of variable lenght</p>
    </div>
</div>

但是所有浏览器实际上还不支持CSS3盒子模型。使用Firefox 13，例如显示是想要的。

html5部分有两个水平div

3 个答案: