我有三个div,希望它们在同一行上显示。每个div都有不同的宽度和高度,并且它们不是纯文本。我想将其中一个左对齐(完全靠左边),将另一个右对齐(完全靠右边),并使第三个居中(在包含div中间,在本例中是整个页面)。
此外,我希望这三个div垂直对齐于包含div底部。我的解决方案是将它们垂直对齐于包含div的顶部。
如何处理这个问题最好呢?
我有三个div,希望它们在同一行上显示。每个div都有不同的宽度和高度,并且它们不是纯文本。我想将其中一个左对齐(完全靠左边),将另一个右对齐(完全靠右边),并使第三个居中(在包含div中间,在本例中是整个页面)。
此外,我希望这三个div垂直对齐于包含div底部。我的解决方案是将它们垂直对齐于包含div的顶部。
如何处理这个问题最好呢?
position:relative
,并将内部子 div 设置为 position:absolute
,您可以使这些 div 在容器的范围内绝对定位。
这让对齐变得很容易,因为您可以使用bottom:0px
来将所有内容垂直对齐到容器底部,然后使用左/右样式在水平轴上进行定位。
我设置了一个可工作的 jsFiddle:http://jsfiddle.net/Damien_at_SF/KM7sQ/5/,以下是代码:
HTML:
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
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;
}
注意:对于“中心”div,margin-left = div宽度的1/2 :)希望这可以帮到你 :)
我的技术类似于 @Damien-at-SF:
我尝试严格展示您所要求的所有要求。
HTML:
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
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
}
<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>
text-align:center;
text-align:right;
...以完美地实现左/居中/右对齐。
在包含的div上设置position: relative
,在您的3个div上设置position: relative
,并将3个div的bottom
属性设置为0
:
bottom: 0
您可以使用align-items: flex-end
来使flexbox项目在垂直方向上对齐底部。
.container {
display: flex;
height: 300px;
min-width: 400px;
background-color: #61a0f8;
justify-content: space-between;
align-items: flex-end;
}
.item {
width: 100px;
height: 120px;
background-color: #f08bc3;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
}
.flex-2 {
width: 140px;
height: 240px;
}
<div class="container">
<div class="item">1</div>
<div class="item flex-2">2</div>
<div class="item">3</div>
</div>