使用float时使元素为Middle

Question

我尝试使用float制作2列。左栏有短文，另一栏是长文like

<div class="boxes">
    <div class="box1">short text</div>
    <div class="box2">This is a long text This is a long text This is a long text <br> This is a long text <br> This is a long text <br></div>
    <div class="clear"></div>
</div>
.box1 {
    float:left;
}
.box2 {
    float:left;
    width: 50%;
}
.clear {
    clear:both;
}

之前是

我试着让它成为

但是当box2具有动态长文本时，我无法使box1处于中间位置。那可能吗？怎么做。感谢。

Answer 1

如果这适合您，您可以使用display:inline-block

进行操作

将您的CSS更改为：

.box1 {
    //float:left;
    display:inline-block;
    vertical-align:middle;
}
.box2 {
    //float:left;
    width: 50%;
     display:inline-block;
    vertical-align:middle;
}

见这里：http://jsfiddle.net/Jr9Fp/

或者你可以在父母身上使用display:table，对孩子使用display:table-cell就像这样：

.boxes{
    display:table;
    background:#ccc;
}

.box1 {
    //float:left;
    display:table-cell;
    vertical-align:middle;
    background:red;
    height:100%;
}
.box2 {
    float:left;
    width: 50%;
    display:table-cell;
   // vertical-align:middle;
}

http://jsfiddle.net/Jr9Fp/1/

Answer 2

这是怎么回事？

.box1{
   width: 200px;
   text-align: center;
   float: left;

}
.box2{
   width: 400px;
   float: right;
}

演示。 http://jsfiddle.net/doniyor/44nE2/