横向布局div,其中包含内容

问题描述 投票:-1回答:1

我正在尝试布局我的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>

这是它看起来像enter image description here

如您所见,框的内容未对齐。我希望第三个div和它的内容是我用它中的数字3绘制出来的。分隔符就在左边,我画了绿线,第二个div在分隔符的左边,第一个div在第二个div的左边。保持这三层的主div充当页眉下方的固定面板。如何使它们对齐并按照我的描述坐下。

html css twitter-bootstrap layout
1个回答
-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>
© www.soinside.com 2019 - 2024. All rights reserved.