全国服务热线:4008-888-888

技术知识

详解css中的float

float与margin

两个邻近的波动元素,当第1个波动元素(无论是左波动還是右波动)的宽度为100%时,第2个波动元素会被挤到下面,根据加上负margin-right值(肯定值至少等于它本身的宽度),可使它返回第1行。

在撰写html编码时,大家一般的习惯性依据UI款式,从左往右来写编码,但有时右边的內容较为关键,因此它的html构造必须放在左边內容上面,让它更早的载入,例如:

左边定宽流式的合理布局

<div class="comment">
    <!-- 右边关键內容 -->
    <div class="content">
      <div class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016⑺8⑸5</span>
      </div>
      <p class="text">吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!</p>
      <div class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回应</span>
      </div>
    </div>
    <!-- 左边內容 -->
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
  </div>
* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.content {
  float: right;
  margin-left: 100px;
}
.date {
  font-size: 14px;
  color: #666;
}
.text {
  margin: 20px 0;
}
.avatar {
  float: left;
  margin-right: ⑻0px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

如上面图的实际效果,虽然在UI上,.content元素在.avatar右侧,但大家在html构造中,依然必须把.content元素放到.avatar元素前面,这个情况下便可以根据给.content元素设定为右波动,随后给.avatar元素设定左或右波动,再加上负margin-right值,让它返回上面。

1.上下两边都不确定宽

实际效果图:

html编码:

<div class="comment">
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
    <div class="content">
      <div class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016⑺8⑸5</span>
      </div>
      <p class="text">吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!吃的再多也不长胖,好愁人啊,如何能迅速长胖呢,线上等,急!</p>
      <div class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回应</span>
      </div>
    </div>
  </div>

关键点:

.avatar元素左波动,.content元素的display特性设为table-cell,实际上这里的.content元素不1定非要设定display为table-cell才行,要是是能开启BFC/haslayout的就行,例如:

float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)

但是由于这里的.content元素是自融入的,不可以定宽,并且里边包括块级元素,因此只能设定overflow特性。

css编码:

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.avatar {
  float: left;
  margin-right: 20px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.content {
  display: table-cell;
}
.date {
  font-size: 14px;
  color: #666;
}
.text {
  margin: 20px 0;
}

2.右边定宽流式的合理布局

实际效果图:

html编码:

<div class="wrap">
  <ul class="list">
    <li class="item">
      <div class="content-wrap">
        <div class="content">
          <div class="author">
            <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
            <span class="name">李荣浩</span>
            <span class="date">2016-01⑵2</span>
          </div>
          <a href="#" class="title">不凑合</a>
          <p>相互之间折磨到白头 忧伤果断不放开手 刚开始纠缠不清以后 才又被人变大了随意 你的暴怒太溫柔 情感又痛又享有 假如我说不吻你不罢休 谁能逼我凑合</p>
          <div class="meta">
            <span class="category-tag">音乐</span>
            <span class="msg-tag">喜爱·5000</span>
          </div>               
        </div>
      </div>
   
      <a href="#" class="thumbnail"><img src="images/pic.jpg" alt="照片"></a>   
    </li>
  </ul> 
</div>

关键点:

1:当第1个波动元素的宽度为100%时,第2个元素会全自动换行,紧挨着第1个元素,这时候能够给第2个波动元素加上负margin值,使它上去

2:第1个波动元素.content外面有1个包裹元素,便捷给.content元素加上padding-right值,让左侧的內容和右侧照片之间留出间隙

实际上双飞翼合理布局的观念也是包括上面两点。

css编码:

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.item {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.content {
  float: left;
  padding-right: 180px;
}
.avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
}
.name {
  vertical-align: middle;
}
.date {
  font-size: 14px;
  color: #666;
  vertical-align: middle;
}
.title {
  display: block;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
}
.thumbnail {
  float: left;
  margin-left: ⑴20px;
}
.thumbnail img {
  width: 120px;
  height: 120px;
}
.meta {
  margin-top: 15px;
  font-size: 14px;
}
.category-tag {
  display: inline-block;
  padding: 0 8px;
  margin-right: 10px;
  border: 1px solid #ea6f5a;
  border-radius: 3px;
  color: #ea6f5a
}
.msg-tag {
  color: #999;
}

3.两边固定不动,正中间自融入的3栏合理布局

如今3栏合理布局非常少了,假如要用到,请立即百度搜索双飞翼合理布局或圣杯合理布局。

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服