search

zhangxinxu / cssworld

《CSS世界》三部曲答疑反馈交流区
49 stars 2 forks source link

《CSS世界》-159页，图6-17的示例 没有产生环绕 #13

Open zoezhao1112 opened 3 years ago

zoezhao1112 commented 3 years ago

Google Chrome 已是最新版本 版本 91.0.4472.106（正式版本） (x86_64)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 300px;
      margin:auto;
    }
    .father{
      border: 1px solid black;
    }
    .father > img{
      float: left;
      width: 60px;
      height: 64px;
    }
    .father::after{
      content: '';
      display: table;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="father">
      <img src="https://demo.cssworld.cn/images/common/l/zxx.jpg">
      我是帅哥，好巧啊，我也是帅哥，原来看这本书的人都是帅哥～
    </div>
    <div>
      虽然你很帅，但是我对你不感兴趣。
    </div>
  </div>
</body>
</html>

WX20210617-104456

HuangYaobin commented 2 years ago

少加了代码

.father + div {
  margin-top: -2px;
}