将三个 div 与 css 并排对齐答案

【问题标题】：Align three divs side by side with css将三个 div 与 css 并排对齐
【发布时间】：2015-05-10 07:59:46
【问题描述】：

我在一个主 div 中有三个 div，id 为 main_div，并且 css 已经如下

<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
</div>

我只想在主 div 中插入三个 div，如下所示

<div id="main_div" style="height:10px; line-height:50px; margin-top:1px; position:relative;>
   <div>
       Div One should be Left(breadcrumb_text)
   </div>
   <div>
       Div Two should be Center(dropdownlist)
   </div>
   <div>
       Div Three should be Right(Pagination)
   </div>
</div>

所以我希望 div 格式显示文本，如

breadcrumb_text             dropdownlist                   Pagination

我通过使用position 属性和各种css 选项尝试使用不同的css，但无法将它们对齐在水平线上，其中一个div 为左，一个div 为中心，另一个div 为右。

那么任何人都可以让我知道我知道将它们放在水平线上的 css 吗？

【问题讨论】：

标签： html css

【解决方案1】：

这也许对你有帮助Fiddle

#main_div > div {
    width: 33%;
    float: left;
}

【讨论】：

【解决方案2】：

我已经稍微修改了您的代码，使每个 div 的间距相等，并删除了 Main div 中的 Position。

有时位置会根据 z-index 值与其他 div（位置）重叠。所以如果你真的需要使用位置，除非不需要。

#main_div{
  height:10px; line-height:50px; margin-top:1px;
  box-sizing:border-box;
}


#main_div > div{
width:31.1%;
  float:left;
  box-sizing:border-box;
  border:1px solid grey;
    margin-right: 10px;
  display:inline-block;
}

#main_div > div:first-child{
margin-left:10px;}

<div id="main_div">
   <div>
       Div One should be Left(breadcrumb_text)
   </div>
   <div>
       Div Two should be Center(dropdownlist)
   </div>
   <div>
       Div Three should be Right(Pagination)
   </div>
</div>

【讨论】：

【解决方案3】：

我想这就是你想要的

JSFiddle

CSS

body
{
  margin:0%;    
}

.main_div
{
  display:block;
  margin:0% 5%;
  width:90%;/*Just random, modify as per your requirement*/
  height:300px;  /*Just random, modify as per your requirement*/
  background:#eee;
  position:relatve;
}

.left-div, .center-div, .right-div
{
   display:inline-block;
   height:100%;
   position:relative;
   float:left; 
   width:33%; 
   border:1px solid #000;   
   text-align:center;
   padding-top:5px;
}

HTML

<div class="main_div">
   <div class="left-div">
       Div One should be Left(breadcrumb_text)
   </div>
   <div class="center-div">
       Div Two should be Center(dropdownlist)
   </div>
   <div class="right-div">
       Div Three should be Right(Pagination)
   </div>
</div>

【讨论】：

@divyYeah 这似乎对我有帮助