CSS＆gt; Div漂浮

Question

我试图设计如下布局：

但正如您在此处所见：http://codepen.io/amonello/pen/zxemxb

<ul>
    <li>
        <div class="picture"></div>
        <div class="name">name</div>
        <div class="title">title</div>
        <div class="title2">title2</div>
        <div class="title3">title3</div>
        <div class="phone">phone</div>
        <div class="email">email</div>
    </li>
</ul>

我在做这件事时遇到了一些麻烦。我很难理解浮动和显示。

你们有没有人指出我正确的方向？

我无法在名称/标题和电话/电子邮件周围添加包装。

Answer 1

也许这样 http://codepen.io/kazup/pen/raPRXz

＆＃13;

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.picture {
  float: left;
  width: 73px;
  height: 100px;
  background: gray;
  border: 1px solid black;
}

.name,
.title,
.title2,
.title3,
.phone,
.email {
  float: left;
  clear: left;
  width: 90%;
  border: 1px solid green;
}

@media screen and (min-width: 600px) { 
  .picture {
    position: absolute;
    float: none;
  }
  
  .name,
  .title,
  .title2,
  .title3 {
    margin-left: 90px;
    width: 35%;
  }
  
  .phone,
  .email {
    float: none;
    clear: none;
    margin-left: 55%;
    width: 35%;
    border: 1px solid red;
  }
}

＆＃13;

<ul>
  <li>
    <div class="picture"></div>
    <div class="name">name</div>
    <div class="title">title</div>
    <div class="title2">title2</div>
    <div class="title3">title3</div>
    <div class="phone">phone</div>
    <div class="email">email</div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

只有.picture具有绝对定位，div才会浮动，除了桌面视图中的电话和电子邮件。 不要关心div的宽度，这样就好了。