0

<section></section>左右のパーツで構成された が必要です。左側の部分は単一の文字列 (日付) のみです。右側の部分には次のようなものが含まれている必要があります。

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

セクション内で sを使用する必要が<div>ありますか? 右部分のテキストは右部分のみにとどめるべきです (そのためfloat:left;、左部分だけを使用することはできません)。

これは s のない私のソリューションですが、<section>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

Internet Explorer の一部のバージョンや、おそらく他のブラウザーでも正しく表示されるようにするには、一方を使用float: left'するdiv必要があります。float: right;

于 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 に答える