CSS의 float에 대한 자세한 그래픽 및 텍스트 설명

이번에는 CSS의 float에 대한 자세한 그래픽과 텍스트 설명을 가져오겠습니다. float의 자세한 그래픽과 텍스트 설명에 대한 주의사항은 무엇인가요?

float 및 margin

두 개의 인접한 부동 요소, 첫 번째 부동 요소(왼쪽 또는 오른쪽 부동 여부)의 너비가 100%일 때 두 번째 부동 요소가 아래로 압착되어 다시 첫 번째 부동 요소로 가져올 수 있습니다. 음수 margin-right 값(적어도 자체 너비와 동일한 절대값)을 추가하여 줄을 만듭니다.

HTML 코드를 작성할 때 우리의 일반적인 습관은 UI 스타일에 따라 왼쪽에서 오른쪽으로 코드를 작성하는 것입니다. 그러나 때로는 오른쪽의 내용이 더 중요하기 때문에 HTML 구조를 UI 스타일의 내용 위에 배치해야 합니다. 더 많은 초기 로드를 위한 왼쪽:

왼쪽의 고정 너비 흐름 레이아웃

<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 요소를 부동으로 설정하면 됩니다. 왼쪽 또는 오른쪽으로 이동한 다음 음수 margin-right 값을 추가하여 다시 맨 위로 가져옵니다.

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>

핵심:

.avatar 요소가 떠있습니다. 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%이면 두 번째 요소가 첫 번째 요소 옆에 자동으로 줄 바꿈됩니다. 이때 두 번째 플로팅 요소에 음수 여백 값을 추가할 수 있습니다. make it go up

2: 첫 번째 플로팅 요소의 .content 외부에 래핑 요소가 있습니다. 이는 padding-right 값을 .content 요소에 추가하여 왼쪽 콘텐츠 사이에 간격을 두는 데 편리합니다. 그리고 오른쪽 이미지

사실 둘 다 날아갑니다. 날개 레이아웃 아이디어에도 위의 두 가지 사항이 포함되어 있습니다.

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 레이아웃 또는 성배 레이아웃에 직접 연결됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

1단계 탐색 모음을 구현하는 CSS

선형 그라데이션 사용에 대한 자세한 설명

html+css의 네 가지 숨기기 방법

위 내용은 CSS의 float에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!