将三个div与css并排对齐

I had three divs inside a main div with id main_div and has css already as below

我在id为main_div的主div中有三个div,并且css已经如下所示

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

I just want to insert three divs in the main div as below

我只想在主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>

So i want the div format to display the text like

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

breadcrumb_text             dropdownlist                   Pagination

I tried with different css by using position attribute and various css options but could n't able to align them in a horizontal line with one div as left , one div as center and other div to right.

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

So can anyone let me know me know the css to place them in an horizontal line ?

所以任何人都可以让我知道我知道css将它们放在水平线上吗?

3 个解决方案

#1

This maybe help you Fiddle

这可能会帮助你小提琴

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

#2

I have modified your code little bit with spacing equally for each div and removed Position in the Main div.

我已经修改了你的代码,每个div的间距相等,并在主div中删除了Position。

Sometimes position will overlap with other div (position) based on z-index value. so if you really need use position unless not required.

有时位置将基于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

I think this is what you are asking for

我想这就是你要求的

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>

#1