div内のコンテンツをhorrizontallyにレイアウトする

Question

私はdiv内に3つのdivを持つレイアウトを作成しようとしています。アプリケーションはブートストラップを使用します。彼らは中央のすべてのテキストやボタンで正しくレイアウトされているようには見えません。私はセカンドボックスとセカンドボックスの間にセパレータを使用しています。また、アプリケーション内の他の場所で使用されていたprouiライブラリの別のクラスcontent-headerを使用し、アプリケーション全体で同じルックアンドフィールを維持するためにここから借りています。

これはCSS

ここ

.fd{ 
     position: fixed; 
     top: 70px; 
     width:100%; 
     background-color: #141313ad; 
     z-index: 1 
    } 

    .fdc{ 
     display: inline-block; 
     *display: inline; zoom: 1; 
     vertical-align:middle; 
     background-color: #141313e5; 
     height: 75px; 
     border-color: black; 

    } 

    .pipe_separator{ 
     font-size: 40px;  
    } 

} 
</style> 

単純化されたHTMLここ

<!--FIXED PANEL--> 
<div class="content-header fd"> 


    <!-- first box--> 
    <div class="col-md-6 fdc" style="display:block; visibility:visible"> 
     first box 
    </div>  

    <!--second box--> 
    <div class="col-md-2 fdc" > 
     second box 
    <span class="pipe_separator">|</span> 
    </div> 

    <!--third box--> 
    <div class="col-md-4 fdc text-left"> 
     third box 
    </div> 

</div> 

あなたがの内容を見ることができるように、それは

どのように見えるされています箱は整列していません。私は3番目のdivとその内容が3番目の数字を使ってそれを引き出した場所にしたい。セパレータの左側にある緑色の線と2番目のdiv、2番目のdivの左側にある最初のdivを描画したところの左のセパレータ。これらの3つのレイヤーを保持するメインのdivは、ページヘッダーの下の固定パネルとして機能します。私が説明したように、それらを一緒に整列させて座らせるにはどうすればいいですか？

Answer 1

最も単純なハックは、境界線のないテーブルにそれらを配置することです。それは次のように動作します：

<div class="content-header fd"> 

<table borders="0"> 
<tr><td> 
<!-- first box--> 
<div class="col-md-6 fdc" style="display:block; visibility:visible"> 
    first box 
</div>  
</td> 
<td> 
<!--second box--> 
<div class="col-md-2 fdc" > 
    second box 
<span class="pipe_separator">|</span> 
</div> 
</td> 
<td> 
<!--third box--> 
<div class="col-md-4 fdc text-left"> 
    third box 
</div> 
</td> 
</tr> 
</table> 
</div>