1

私は次のHTMLを持っています:

<div class="section">
    <p class="left">Some text</p>
    <div class="right">
        <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7, item 8</p>
    </div>
</div>

およびCSS:

div.section {
    margin: 30px;

    background: blue;
}

div.section p.left {
    display: inline;
    margin-top: 4px;

    background: red;
}

div.right {
    float: right;
    word-wrap: break-word;

    background: green;
}

この Fiddleでこれらを操作できます。次のようになります。

問題

<div>代わりに、右フローティングを「左」なしで利用可能な幅にラップして、次のようにしたいと思い<p>ます。

望ましい解決策

どうすればこれを達成できますか (Javascript については教えないでください。CSS でこれを行う方法があるはずです)。float の width を指定すると希望のラッピングが得られますが、左の幅が異なる<div>ため、それができません。<p>

アップデート

いくつかの詳細を追加させてください。すべてのテキストが動的に生成され、親の幅が<div>変化します。8 ではなく 100 の項目がある場合があります。分割は<p>有効な解決策ではありません。

4

3 に答える 3

-1

多分

<div class="section">
    <p class="left">Some text</p>
    <div class="right">
        <p>item 1, item 2, item 3, item 4, item 5, item 6, item 7</p>
        <p>item 8</p>
    </div>
</div>

うまくいくようです。

于 2013-02-17T03:30:07.843 に答える
-1 
<div class="container">
<div class="left" style="float:left;width:10%">
Some Text
</div>
<div class="right" style="float:left; width:90%">
<p>item 1, item 2, item 3, item 4, item 5, item 6, item 7</p>
<p>item 8</p>
</div>
<div style="clear:both">perhaps this without text if you want nothing else to float below</div>

</div>
于 2013-02-17T03:37:02.020 に答える
-1

少し試してみましたが、これがあなたが探しているものだと思います。 http://jsfiddle.net/2JLJR/4/

個々の要素に float とパーセント幅を与えました。

div#wrapper {
 margin: 30px;
 float:left;
 background: blue;
 height:auto;
}

p.left {
 display: block;
 width:20%;
 float:left;
 background: red;
}

div.right {
 float: right;
 word-wrap: break-word;
 width:80%;
 background: green;
 text-align:justify;
}
于 2013-02-17T14:05:14.323 に答える