Question

我有两个浮动的div并排。右边的那个高度可以根据内容而变化。

我试图让左边的div与右边的div一起生长，并且左边的div的内容也是垂直居中的。

CSS

.container{
border: 1px solid black;
}

.floatFirst{
float: left;    
border : 1px solid red;
}

.floatSecond{
float: left;    
border : 1px solid blue;
}

.divToBeVerticallyCentered
{
border: 1px solid green;
position: relative;
top: 50%;
transform: translateY(-50%);
}

HTML

<div class="container">
   <div class="floatFirst">
       <p class="divToBeVerticallyCentered">this should be vertically centered</p>
   </div>

<div class="floatSecond">
   <p>this is some text</p>
   <p>this is some text</p>
   <p>this is some text</p>
   <p>this is some text</p>
   <p>this is some text</p>
   <p>this is some text</p>
   <p>this is some text</p>
</div>
</div>

任何帮助都将不胜感激。

Answer 1

如果您将CSS调整为使用浮点数到表格单元格，您可以通过以下方式获得所需内容：

＆＃13;

.container {
    border: 1px solid black;
}
.floatFirst {
    display:table-cell;
    border : 1px solid red;
    vertical-align:middle;
}
.floatSecond {
    display:table-cell;
    border : 1px solid blue;
}
.divToBeVerticallyCentered {
    border: 1px solid green;
}

＆＃13;

<div class="container">
    <div class="floatFirst">
        <!-- this needs to grow with floatSecond-->
        <p class="divToBeVerticallyCentered">this should be vertically centered</p>
    </div>
    <div class="floatSecond">
        <p>this is some text</p>
        <p>this is some text</p>
        <p>this is some text</p>
        <p>this is some text</p>
        <p>this is some text</p>
        <p>this is some text</p>
        <p>this is some text</p>
    </div>
</div>

＆＃13;

Answer 2

我认为在两个div上使用表而不是div或table-cell是最好的选择，两列都会同时增长。

关于垂直对齐，如果你摆脱了translateY，你的代码将会起作用（相对于top：50％），或者你只需要使用vertical-align

两个浮动div，以保持相同的高度并具有垂直对齐的内容

2 个答案: