如何使两个左浮动 div 垂直

Question

嘿，我有一个用户信息 div，其中包含用户照片、用户名、用户简介 divs，现在我想将用户照片放在左侧，名称和简介在另一侧，

Html

<div class="user-info">
<div class="user-pic">
    <img src="" class="u-pic"/>
</div> 
<div class="user-name">Jon Doe</div>   
<div class="user-bio">I am a english teacher</div></div>

Jsfiddle

完成此操作后，所有 div 的高度都相同，但我希望名称 div 位于顶部，生物 div 应位于名称 div 的底部。

谢谢

Answer 1

从用户名 class 中删除浮点数属性

.user-info {
  width: 500px;
  height: 100px;
  border: 1px solid #DFDFDF;
  box-shadow: 0px 1px 1px #aaa;
  float: left;
    padding:15px
}
.user-pic {
  float: left;
  width: 80px;
  height: 80px;
  border: 1px solid #DFDFDF;
    margin-right:15px;
    background:blue;
}
.user-name {
  //float: left;
  font-size: 19px;
  color: #333;
    margin-right:15px;
}

.user-bio{
  float: left;
  font-size: 19px;
  color: #333;
}

如何使两个左浮动 div 垂直

how to make two left floated div vertically

css

css-float