大胆地设置div的内容

-1

我想布局我的div，里面有三个div。该应用程序使用Bootstrap。他们似乎没有正确地布置中心的所有文字或按钮。我在第二个和第三个盒子之间使用分隔符。该应用程序还使用另一个类content-header，该类来自应用程序中其他位置使用的proui库，并在此处借用以保持整个应用程序具有相同的外观和感觉。大胆地设置div的内容

这是简化的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用作页眉下面的固定面板。我如何让它们排列在一起并按照我所描述的方式坐下。

来源

2017-11-17 user20358

您的投票没有评论让我不知道这个问题出了什么问题！ – user20358

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

来源

2017-11-18 01:19:12

大胆地设置div的内容

回答

相关问题