Question

嘿，我有一个用户信息div，有用户pic，用户名，用户生物div，现在我想用户pic到左侧和Name＆amp;生物是另一面，

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位于顶部，而bio div应位于名称div的底部。

谢谢

Answer 1

从用户名类

中删除float属性

.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

1 个答案: