CSSのfloatの詳細なグラフィックとテキストの説明

今回はCSSでのfloatの詳細なグラフィックとテキストの説明をお届けします。floatの詳細なグラフィックとテキストの説明の注意点は何ですか。実際のケースを見てみましょう。

floatとmargin

2つの隣接する浮動要素、最初の浮動要素(左または右の浮動)の幅が100%の場合、2番目の浮動要素は下に押し込まれますが、最初の浮動要素に戻すことができます負の

margin-right 値 (少なくともその幅と等しい絶対値) を追加して、行を追加します。

HTML コードを記述するとき、UI スタイルに従って左から右にコードを記述するのが通常の習慣ですが、場合によっては右側のコンテンツの方が重要であるため、その HTML 構造を右側のコンテンツの上に配置する必要があります。

左側の固定幅フローレイアウト

<p class="comment">
    <!-- 右侧重要内容 -->
    <p class="content">
      <p class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016-78-55</span>
      </p>
      <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p>
      <p class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回复</span>
      </p>
    </p>
    <!-- 左侧内容 -->
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
  </p>

* {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: -80px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

上の図に示すように、.content 要素は .avatar の右側にありますが、より早期にロードできるようにします。 UI では、まだ HTML 構造内にあります。 .avatar 要素の前に .content 要素を配置する必要があります。この時点で、.content 要素を右にフロートに設定し、次に .avatar 要素をフロートに設定できます。左または右に移動し、負のマージン右値を追加して上に戻します。

1. 左側と右側が広くありません

レンダリング:

htmlコード:

<p class="comment">
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
    <p class="content">
      <p class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016-78-55</span>
      </p>
      <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p>
      <p class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回复</span>
      </p>
    </p>
  </p>

コアポイント:

.アバター要素がフロートしますleft では、.content 要素の表示属性は table-cell に設定されています。実際、ここでの .content 要素は、次のように BFC/haslayout をトリガーできる限り、必ずしも表示を table-cell に設定する必要はありません。 :

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

しかし、このため、 .content 要素はアダプティブであり、固定幅を持つことができず、ブロックレベルの要素が含まれるため、オーバーフロー属性のみを設定できます。

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コード:

<p class="wrap">
  <ul class="list">
    <li class="item">
      <p class="content-wrap">
        <p class="content">
          <p class="author">
            <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
            <span class="name">李荣浩</span>
            <span class="date">2016-01-22</span>
          </p>
          <a href="#" class="title">不将就</a>
          <p>互相折磨到白头 悲伤坚决不放手 开始纠缠之后 才又被人放大了自由 你的暴烈太温柔 感情又痛又享受 如果我说不吻你不罢休 谁能逼我将就</p>
          <p class="meta">
            <span class="category-tag">歌曲</span>
            <span class="msg-tag">喜欢·5000</span>
          </p>               
        </p>
      </p>
　　　
      <a href="#" class="thumbnail"><img src="images/pic.jpg" alt="图片"></a>   
    </li>
  </ul> 
</p>

コアポイント:

1: 最初の浮動要素の幅が 100% の場合、2 番目の要素は最初の要素の隣に自動的に折り返されます。このとき、2 番目の浮動要素に負のマージン値を追加できます。上に移動します

2: 最初のフローティング要素の .content の外側にラッピング要素があります。これは、

padding-right 値を .content 要素に追加して、左側のコンテンツの間にギャップを残すのに便利です。そして右の画像

実際にはどちらも飛びます 翼のレイアウトの考え方には上記の2点も含まれます。

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: -120px;
}
.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列レイアウトはほとんどありません。使用したい場合は、行ってください。 Baidu Double Flying Wing レイアウトまたは Holy Grail レイアウトに直接アクセスできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

第1レベルのナビゲーションバーを実装するためのCSS

線形グラデーションの使用の詳細な説明

html+cssの4つの非表示方法

以上がCSSのfloatの詳細なグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。