0

私はかなりうまく機能する3列のレイアウトを持っています:

http://jsfiddle.net/nicorellius/YNyHW/7/

私の目標は、既存のモジュラー ユニットを、divclass を持つものである center に追加することtwo-innerです。マークアップは次のようになります。

<html>
<head></head>
<body>
<div>  
    <div class="container">       
        <div class="one">
            <div class="one-inner"></div>
        </div>               
        <div class="two">
            <div class="two-inner"></div>
        </div>                       
        <div class="three">
            <div class="three-inner"></div>
        </div>    
    </div>
</div>
</body>
</html>

CSS はfiddleで確認できます。モジュラー ユニットの一部は、データベースからデータを取得して表示する PHP から実際に構築されています。テスト用に使用しているいくつかのアレイがあります。これは、6 つのエントリを模倣し、モジュラー ユニットに 2 幅 x 3 の高さのボックス レイアウトを提供します。私の問題は、このユニットを上のレイアウトに追加すると、下のテスト サイトのようなものが得られることです。

モジュラー ユニットのマークアップは次のようになります。

<section class="unit">
    <section class="buttons margin-top-2em">
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 1</button>
        </div>
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 2</button>
        </div>
        <div class="button-fixed-width">
            <button type="button" class="<bootstrap-button>">button 3</button>
        </div>
    </section>
    <div class="row">   
        <?php // loop through some arrays to get module unit ?>
    </div>
</section>

さまざまな微調整を試してみましたが、それを行う唯一のことは、外部クラスの高さoneをゼロに近づけることですtwo。three

div高さなどを変えてみましたが、センターが上がらない原因がわかりません。私は何が欠けていますか？

クラスの CSSunitはフィドルにあります。それ自体は問題なく動作し、単一の列に折りたたむブレークポイントがいくつかあります。私はこの部分を通過することはできません...

編集

@kozlovski5 からいくつかのアイデアを試した後、div必要に応じて上下に移動できるようになりました。しかし、私を不安にさせる何かが起こっています。私はレイアウトdisplay: tableにあまり慣れていないので、何かが足りないと確信しています。display: table-cellたとえば、div問題の s にテキストを追加すると、クラスone、two、またはthree、または内部クラスのいずれかで、@kozlovski5 が推奨する調整がなくなります。つまり、使用せずtop: -37.5em;にdivs にテキストを入力すると、すべてが正常に機能するように見えます。境界のあるセクションでレイアウトをモデル化しようとすると、奇妙な動作が発生します。

代わりにフロートを使用することになりました。最終的には上記のテスト サイトを参照してください。

4

1 に答える 1