2

ブートストラップを使用してWebサイトを設計しようとしています。ここで、背景が色付きの小さなdivを（行流体、スパンクラスのブートストラップ）内に配置する必要があります。

これは私のコードです

    <style>
    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 
          0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin:5px;
        color:white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        }
    </style>


    <div class="row-fluid">
    <div class="span12">
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    </div>
    </div>

このコードの問題は、divクラスlblueがブートストラップのspan12クラスの幅全体を占めることです。そのdivには動的である必要があり、コンテンツの長さに応じてそれ自体が伸びるため、実際にはそのdivに特定の幅を割り当てることはできません。

まとめ：

  1. divクラスlblueを、その中のコンテンツと同じ長さにする必要があります

これに対する修正はありますか？

4

1 に答える 1

0

はい、問題を簡単に解決できます。以下を .lblue に追加します。

display: table;

ほとんどの (すべてではないにしても) ブラウザーと互換性があるはずです。

編集 1

このトピックに関するもう少し詳しい情報は、次の場所にあります。

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

于 2012-11-23T08:37:07.357 に答える