左,中,右对齐同一行底部的div

时间:2021-12-12 22:18:41

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.

我试图严格证明你要求的所有要求。

Live Demo

现场演示

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.

我试图严格证明你要求的所有要求。

Live Demo

现场演示

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