问题描述:

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

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

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.

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

网友答案:

This maybe help you Fiddle

#main_div > div {
    width: 33%;
    float: left;
}
网友答案:

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

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

#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>
网友答案:

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>
相关阅读:
Top