I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I'd like to left-align one (all the way to the left), right-align another (all the way to the right), and center the third (in the middle of the containing div, the whole page in this case).
我有三个div,我想在同一行显示。三者中的每一个都具有不同的宽度和高度,并且它们不是直的文本。我想左对齐一个(一直到左边),右对齐另一个(一直到右边),然后居中第三个(在包含div的中间,在这种情况下整个页面) )。
In addition, I'd like the three divs to be vertically aligned to the bottom of the containing div. The solution I have vertically aligns them to the top of the containing div.
另外,我希望三个div垂直对齐到包含div的底部。我已经将它们垂直对齐到包含div的顶部的解决方案。
What is the best way to handle this?
处理这个问题的最佳方法是什么?
5 个解决方案
#1
20
By setting your container div to position:relative
and the child divs to position:absolute
you can absolute position the divs within the confines of the container.
通过将容器div设置为position:relative并将子div设置为position:absolute,可以将div绝对定位在容器的范围内。
This makes it easy, as you can use bottom:0px
to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.
这样可以轻松实现,因为您可以使用bottom:0px将所有垂直对齐到容器的底部,然后使用左/右样式沿水平轴定位。
I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:
我建立了一个有效的jsFiddle:http://jsfiddle.net/Damien_at_SF/KM7sQ/5/,代码如下:
HTML:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
Note: For the "center" div, the margin-left = 1/2 the width of the div :)
注意:对于“center”div,margin-left = 1/2 div的宽度:)
Hope that helps :)
希望有所帮助:)
#2
4
My technique is similar to @Damien-at-SF:
我的技术类似于@ Damien-at-SF:
I tried to rigorously demonstrate all the requirements you asked for.
我试图严格证明你要求的所有要求。
现场演示
HTML:
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
CSS:
#container {
position: relative;
height: 400px;
width: 80%;
min-width: 400px;
margin: 0 auto;
background: #ccc
}
#left, #right, #mid {
position: absolute;
bottom: 0;
}
#left {
left: 0;
width: 80px;
height: 200px;
background: red
}
#right {
right: 0;
width: 120px;
height: 170px;
background: blue
}
#mid {
left:50%;
margin-left: -80px;
width: 160px;
height: 300px;
background: #f39
}
#3
2
To make your center div elastic, you could do something like:
为了使你的中心div有弹性,你可以做类似的事情:
<div style="display:table; width:500px;">
<div style="display:table-row;">
<div style="display:table-cell; width:50px;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell; width:50px;"></div>
</div>
</div>
#4
1
A further enhancement to the first answer:
第一个答案的进一步增强:
In the "center" div CSS, you need to add:
在“center”div CSS中,您需要添加:
text-align:center;
In the "right" div CSS, you need to add:
在“右”div CSS中,您需要添加:
text-align:right;
... to perfectly achieve left/center/right aligning.
...完美地实现左/中/右对齐。
#5
0
Set position: relative
on the containing div, set position: relative
on your 3 divs, and set the bottom
attribute of the 3 divs to 0
:
设置位置:相对于包含div,设置位置:相对于3个div,并将3个div的bottom属性设置为0:
bottom: 0
#1
20
By setting your container div to position:relative
and the child divs to position:absolute
you can absolute position the divs within the confines of the container.
通过将容器div设置为position:relative并将子div设置为position:absolute,可以将div绝对定位在容器的范围内。
This makes it easy, as you can use bottom:0px
to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.
这样可以轻松实现,因为您可以使用bottom:0px将所有垂直对齐到容器的底部,然后使用左/右样式沿水平轴定位。
I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:
我建立了一个有效的jsFiddle:http://jsfiddle.net/Damien_at_SF/KM7sQ/5/,代码如下:
HTML:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
CSS:
CSS:
#container {
position:relative;
height:400px;
width:100%;
border:thick solid black;
}
#container div {
background:grey;
width:200px;
}
#left {
position:absolute;
left:0px;
bottom:0px;
}
#center {
position:absolute;
left:50%;
margin-left:-100px;
bottom:0px;
}
#right {
position:absolute;
right:0px;
bottom:0px;
}
Note: For the "center" div, the margin-left = 1/2 the width of the div :)
注意:对于“center”div,margin-left = 1/2 div的宽度:)
Hope that helps :)
希望有所帮助:)
#2
4
My technique is similar to @Damien-at-SF:
我的技术类似于@ Damien-at-SF:
I tried to rigorously demonstrate all the requirements you asked for.
我试图严格证明你要求的所有要求。
现场演示
HTML:
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
CSS:
CSS:
#container {
position: relative;
height: 400px;
width: 80%;
min-width: 400px;
margin: 0 auto;
background: #ccc
}
#left, #right, #mid {
position: absolute;
bottom: 0;
}
#left {
left: 0;
width: 80px;
height: 200px;
background: red
}
#right {
right: 0;
width: 120px;
height: 170px;
background: blue
}
#mid {
left:50%;
margin-left: -80px;
width: 160px;
height: 300px;
background: #f39
}
#3
2
To make your center div elastic, you could do something like:
为了使你的中心div有弹性,你可以做类似的事情:
<div style="display:table; width:500px;">
<div style="display:table-row;">
<div style="display:table-cell; width:50px;"></div>
<div style="display:table-cell;"></div>
<div style="display:table-cell; width:50px;"></div>
</div>
</div>
#4
1
A further enhancement to the first answer:
第一个答案的进一步增强:
In the "center" div CSS, you need to add:
在“center”div CSS中,您需要添加:
text-align:center;
In the "right" div CSS, you need to add:
在“右”div CSS中,您需要添加:
text-align:right;
... to perfectly achieve left/center/right aligning.
...完美地实现左/中/右对齐。
#5
0
Set position: relative
on the containing div, set position: relative
on your 3 divs, and set the bottom
attribute of the 3 divs to 0
:
设置位置:相对于包含div,设置位置:相对于3个div,并将3个div的bottom属性设置为0:
bottom: 0