Html 垂直对齐固定宽度容器中的可变高度元素
使用Html 垂直对齐固定宽度容器中的可变高度元素,html,css,vertical-alignment,Html,Css,Vertical Alignment,使用显示:表格,我试图在一个固定宽度的容器中垂直对齐两个具有不同高度的内联div 显示:表格和显示:表格单元格与垂直对齐:中间是一个非常简单的解决方案,在某些情况下可以正常工作-但是在这方面,我似乎遗漏了一些东西 我的小提琴的结果是一个正确的垂直对齐,但每个元素没有保持其响应宽度来填充整个容器空间。i、 e.容器内的2个元件等于50%宽度 这是我的密码: HTML <div class="table container"> <div class="inner-column
显示:表格代码>,我试图在一个固定宽度的容器中垂直对齐两个具有不同高度的内联div
显示:表格代码>和显示:表格单元格
与垂直对齐:中间
是一个非常简单的解决方案,在某些情况下可以正常工作-但是在这方面,我似乎遗漏了一些东西
我的小提琴的结果是一个正确的垂直对齐,但每个元素没有保持其响应宽度来填充整个容器空间。i、 e.容器内的2个元件等于50%宽度
这是我的密码:
HTML
<div class="table container">
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="left" class="table-cell">
content
</div>
</div>
</div>
<div class="inner-column table-cell">
<div class="table inner-container">
<div id="right" class="table-cell">
content
</div>
</div>
</div>
</div>
以下是a中的上述内容
问题列表:
内列的宽度略大于容器的宽度
每个元素容器未与容器的固定高度垂直对齐
display:table cell
未被应用,因为您在display:inline block
之前编写了此代码。
我更新了小提琴
你还有其他的智慧吗?用flex重新创建同样的东西,但有响应性的bug。
body {
width: 100%;
margin: 0 auto;
background: white;
color: white;
text-align: center;
background: white;
}
.table {display: table;}
.table-cell {display: table-cell; vertical-align: middle;}
.container {
width: 600px;
height: 200px;
background: lightgrey;
margin: 0 auto;
white-space: nowrap;
padding: 0
}
.inner-column {
display: inline-block;
white-space: normal;
width: 50%;
height: 100%;
border:1px blue solid;
padding: 0;
margin: 0;
}
.inner-container {
margin: 0 auto;
width: 100%;
}
#left {
background-color: red;
height: 120px;
}
#right {
background-color: purple;
height: 170px;
}