1

これが私が達成しようとしているもののイメージです: http://i.imgur.com/XKPuV.png

境界線のある外側のコンテナーと灰色の背景の内側のコンテナーが必要です。内側のコンテナ内には 2 つのブロックがあります。左側がテキスト、右側が画像です (どちらの側の要素も重要ではなく、何でもかまいません)。かなり基本的なもの。

以下のコードでは、6 つの列にまたがる 2 つの div が分割されています (これは次のようになります: http://i.imgur.com/BEIVl.png )。この問題を解決する最善の方法は何ですか?

<div class="container" style="border: 1px solid gray;height:490px;margin-top:20px;">
<div id="inner-container" style="background:gray;margin:5px;">
    <div class="row">
        <div class="span6">
            <p style="margin:5px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>
        </div>
        <div class="span6">
            <p style="margin:5px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>
        </div>
    </div>
</div>

4

1 に答える 1

0

問題は、spanX クラスでインライン マージンとパディングを指定できないことです。これらは、boostrap 独自のパディング/マージン設定をオーバーライドするためです (これが、2 番目の div が次の行に移動する理由です。使用せずに必要なものを作成することをお勧めします)。内部 div の spanX 定義フィドルを参照してください: http://jsfiddle.net/periklis/KGMEF/1/

于 2012-06-04T18:53:52.337 に答える