0

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

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

我应该<div>在一个部分中使用 s 吗？右侧的文字应该只保留在右侧（所以我不能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 且没有错误？

4

3 回答 3

2

只需margin-left:100px;在右侧使用，并摆脱左侧的高度（示例）：

<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>
于 2012-07-06T13:31:06.907 回答
0

如果您float: left'是其中之一div，则应该float: right;在某些版本的 Internet Explorer 和其他浏览器中正确显示此内容。

于 2012-07-06T13:27:13.353 回答
-1

现代风格将使用 CSS3 盒子模型（示例）：

<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，例如，显示是所希望的。

于 2012-07-06T13:49:05.050 回答