Question

我在一个ID为main_div的主要div中有三个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将它们放在水平线上吗？

Answer 1

这可能会帮助你Fiddle

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

Answer 2

我已经修改了你的代码，每个div的间距均匀，并在主div中删除了位置。

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

＆＃13;

#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;}

＆＃13;

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

＆＃13;

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

将三个div与css并排对齐

3 个答案: