横向布局div并在其中包含内容

Question

我正在尝试布局我的div，其中包含三个div。该应用程序使用Bootstrap。他们似乎没有正确地布置中心的所有文字或按钮。我在第二个和第三个框之间使用分隔符。该应用程序还使用了另一个类content-header，它来自应用程序中其他地方使用的proui库，并在此处借用，以便在整个应用程序中保持相同的外观。

这是简化的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>

这是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>

这是它的样子

如您所见，框的内容未对齐。我希望第三个div和它的内容是我用它中的数字3绘制出来的。分隔符就在左边，我画了绿线，第二个div在分隔符的左边，第一个div在第二个div的左边。保持这三层的主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>