CSS布局小知识合集

这篇文章记录一些自己学习CSS的知识点，不包含JavaScript。能用CSS解决的问题，就不要用JavaScript。

一、移动端上图下文布局


<style>
   * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    ul {
      /*解决inline-block空白间隙问题*/
      font-size: 0;
      /*文字两端对齐*/
      text-align: justify;
    }
    li {
      display: inline-block;
      width: 50%;
      padding: 1%; 
      vertical-align: top;
    }
    li img {
      width:100%;
      max-width: 100%;
      border-radius: 5px;
      box-shadow: 1px 1px 1px #696969;
    } 
    li span {
      font-size: 14px;
    }
    /*伪元素实现换行，替代<br>换行标签*/
    li span::before {
      content: "\A";
      white-space: pre;
    }
 </style>
  <ul>
    <li>
      <img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
      <span>迅速找到我。我的特征是，狂喜与绝望。</span>
    </li>
    <li>
      <img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
      <span>夏天的风却冷，你曾经是我最想要的，但你似乎从来都不需要我。我想就是因为这样，我放弃了你。。</span>
    </li>
    <li>  
      <img src="https://upload-images.jianshu.io/upload_images/5794148-7ca25af63a40f95a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" />
      <span>梦想，可以天花乱坠，理想，是我们一步一个脚印踩出来的坎坷道路。</span>
    </li>
  </ul>

实现效果

线上访问地址： http://tianshuo1993.com/css/demo1.html

二、左右排布的列表，左侧是标签信息，右侧是描述信息

这种效果需要考虑以下几个问题：

容器不能定高
左侧安全宽度，右侧自动分配剩余空间。一定要使用em单位,不要使用px或者rem。无论容器的字号大小是多少，左侧宽度都不会空间不足，非常弹性，容错性很强。
考虑极端内容（文字内容很多、连续的一串英文字符、没有文字内容）
空值处理

<style>
  /*在这做简单处理,实际项目中需要用类似reset.css*/
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  h4 {
    margin: 5px 0;
  }
  dl {
    line-height: 1.5;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
  }
  dd {
    word-break: break-all; 
  }
  dd:empty::before {
    content: '-';    
    color: #999;
  }
  /*position布局实现*/
  .dl1 dt {
    position: absolute;
  }
  .dl1 dd {
    margin-left: 5em;
    text-align: right;
  }
  /*Flex布局实现*/
  .dl2 {
    display: flex;
    flex-wrap: wrap;
  }
  .dl2 dt {
    width: 5em;
  }
  .dl2 dd {
    width: calc(100% - 5em);
    text-align: right;
  }
  /*Grid布局实现*/ 
  .dl3 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1em;
  }
  .dl3 dd {
    text-align: right;
  }
  /*float布局实现*/
  .dl4 dt {
    width: 5em;
    float: left;    
  }
  .dl4 dd {
    text-align: right;
    overflow: hidden;
  }
  /* 流体特性实现 */
  .dl5 dd {
    text-align: right;
    margin: -1.3em 0 0 5em; 
  }
</style>

<h4>1.absolute实现：</h4>
<dl class="dl1">
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定时间</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>绑定状态</dt> 
  <dd>有效绑定状态</dd>
</dl>
<h4>2.flex实现：</h4>
<dl class="dl2">
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定时间</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>绑定状态</dt> 
  <dd>有效绑定状态</dd>
</dl>
<h4>3.grid实现：</h4>
<dl class="dl3">
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定时间</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>绑定状态</dt> 
  <dd>有效绑定状态</dd>
</dl>
<h4>4.float实现：</h4>
<dl class="dl4">
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定时间</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>绑定状态</dt> 
  <dd>有效绑定状态</dd>
</dl>
<h4>5.流体特性实现：</h4>
<dl class="dl5">
  <dt>手机系统</dt>
  <dd>Android</dd>
  <dt>登录方式</dt>
  <dd>QQ互联登录</dd>
  <dt>绑定时间</dt>
  <dd>2019-01-02 11:10</dd>
  <dt>绑定状态</dt> 
  <dd>有效绑定状态</dd>
</dl>

实现效果

参考链接：https://www.zhangxinxu.com/wordpress/2019/01/css-quiz-1/
参考GitHub：https://github.com/zhangxinxu/quiz/issues/1
在线demo：https://www.zhangxinxu.com/study/201901/css-quiz-1-layout-demo.php

最后编辑于：2019.01.14 20:18:25