How to align 3 divs (left/center/right) inside another div?

前端未结

关注

 18  2365

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]]

Container div is 100% wid

相关标签:

18条回答

悲&欢浪女

2020-11-21 21:05

With twitter bootstrap :

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

0 讨论(0)

青春惊慌失措

2020-11-21 21:07

Using Bootstrap 3 I create 3 divs of equal width (in 12 column layout 4 columns for each div). This way you can keep your central zone centered even if left/right sections have different widths (if they don't overflow their columns' space).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

To create that structure without libraries I copied some rules from Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

0 讨论(0)

情书的邮戳

2020-11-21 21:10
With that CSS, put your divs like so (floats first):
```
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>
```
P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.
0 讨论(0)
发布评论:

提交评论
- 加载中...
佛祖请我去吃肉

2020-11-21 21:13
You've done it correctly, you only need to clear your floats. Simply add
```
overflow: auto; 
```
to your container class.
0 讨论(0)
发布评论:

提交评论
- 加载中...
迷失自我

2020-11-21 21:17
Float property is actually not used to align the text.

This property is used to add element to either right or left or center.
```
div > div { border: 1px solid black;}
```
```
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
```
for float:left output will be [First][second][Third]

for float:right output will be [Third][Second][First]

That means float => left property will add your next element to left of previous one, Same case with right

Also you have to Consider the width of parent element, if the sum of widths of child elements exceed the width of parent element then the next element will be added at next line
```
 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
```
[First] [Second]

[Third]

So you need to Consider All these aspect to get the perfect result
0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2020-11-21 21:17

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

0 讨论(0)

1 2 3 下一页