1

CSS をいじりながら単語の上に単純な水平スタックを作成しようとしていますが、他の div が空のときにコンテンツを中央に配置しながら 2 つの div を水平にスタックすることは不可能であることに気付きました。

これが問題の例です。クロムでやってみました。 http://jsfiddle.net/mncmN/

<div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8);">
    <div style="text-align:center; display: inline-block;  "> <a>Summary</a>

    </div>
    <div style="text-align:center;  display: inline-block; height: 100%; border-right: solid gray 1px;"></div>
</div>

どうしてこんなことに？

要約すると、3 つのものが一緒に必要です。

1) インライン div ブロックは水平方向にスタックします

2) それらの中のテキストは、(親コンテナーに対して) 中央に配置されます。

3) ボーダーとして機能する空の div ボックス。

4

4 に答える 4

2

これが更新された JSFIDDLE です- それはまさにあなたが探しているものですか?

<div class="container"  >

    <div class="left">1</div>

    <div class="center">2</div>

    <div class="right">3</div>

</div>
于 2013-06-25T05:51:28.730 に答える
1

可能です。

これがワーキングソリューションです

コード：

    <div style="margin: 0px; height:50px; width:100%; border-bottom: solid 1px rgba(50,50,50,0.1); background: url(menu-back.png); background-repeat: repeat-x; font-family: helvetica; color: rgba(50,50,50,0.8); display:table;">
    <div style="text-align:center; display: table-cell; background:#cccccc; vertical-align:middle; "> <a>Summary</a></div>
    <div style="text-align:center;  display: table-cell; background:gray; vertical-align:middle; height: 100%; border-right: solid gray 1px;">sdfsdfsdfsdf</div>
</div>
于 2013-06-25T05:49:44.613 に答える
0

サンプル [http://jsfiddle.net/mncmN/5/][1] をご覧ください。これがあなたの質問だったと思いますか？`

<div style="margin: 0px; border: solid red 1px; width:100%; border-bottom: solid 1px black;">
     <div style=" border: solid gray 1px; text-align:center; display: inline-block; "> <a>Summary</a>
    </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;">ff </div>
        <div style="display: inline-block; text-align:center; border: solid gray 1px;"> </div>
    </div>`


      [1]: http://jsfiddle.net/mncmN/5/
于 2013-06-25T06:06:54.717 に答える
0

これを空の div: に入れます&nbsp;。ホワイトスペースです。div はまだ空に見えますが、幅と高さを設定できるようになりました。

また、この jsFiddle のように、CSS を html から分離してみてください: http://jsfiddle.net/WzymM/

于 2013-06-25T05:56:04.700 に答える