List样式进阶——图片环绕、分栏多列布局

前言

好几个月没有更新了，也侧面反应工作太忙。最近被各种List的样式折磨得不轻。看似样式简单，但是在实现时也遇到不少问题。这篇小文记录一下，也提供给遇到相似问题的同学。

1. List图片环绕

(1) 目标

如图，实现这样一个效果：

• List环绕在图片周围
• List的点始终和段落对齐，且在内容的外部
  

(2) 分析和实现

实现文字环绕，需要将图片设置浮动float: left。

原点始终在文字外，所以list-style: outside（这个是默认的，所以不用设置）。

进行了这些操作以后，效果如下：

现在需要做的是移动list的位置，在图右边的需要往右移动，而在图下方的需要往左移动。这就产生了一个矛盾，我们并不知道动态内容的情况下，哪些内容会在右，哪些会在下方。

如何解决呢？我们将两部分调整到一致状态。

下方的间隙的产生是由于浏览器自动对ul设置了padding-inline-start: 40px;，另外设置margin只对下方有效，右方的无效。所以可以设置margin-left: -40px将右方和下方的调整到一致。

现在唯一要做的是将list整体右移。上面提到了，margin对右侧的不奏效，同理也不能使用padding。最简单的是通过设置position: relative; left: 1em，利用相对定位不脱离文档流的方式移动list。同样transform: translateX(1em);也奏效。

demo: https://jsfiddle.net/doyk9hx1/1/

<div class="artical">
  <img src="https://via.placeholder.com/150" alt="">
  <p>You can get prescriptions filled at any of our 24 Kaiser Permanente pharmacies.</p>
  <ul>
    <li>You can get prescriptions filled at any of our 24 Kaiser Permanente pharmacies. </li>
    <li>You can also get a 90-day supply refilled at a reduced copay through mail order, and have them delivered right to your home with no cost for shipping.</li>
        <li>You can get prescriptions filled at any of our 24 Kaiser Permanente pharmacies. </li>
    <li>You can also get a 90-day supply refilled at a reduced copay through mail order, and have them delivered right to your home with no cost for shipping.</li>
  </ul>
  <p>
    You can also get a 90-day supply refilled at a reduced copay through mail order, and have them delivered right to your home with no cost for shipping.
  </p>
</div>

.artical{
  width: 400px;
  font-size: 16px;
}
img{
  float: left;
  margin: 0 20px 10px 0;
}

li{
  position: relative;
  left: 1em;
  margin-left: -40px;
}

(3) 解决IE兼容问题

其他浏览器显示都是好的，唯独IE即便是在高版本下，也呈现如下样子：

经过尝试发现，IE并不支持list-style-position: outside这个在其他浏览器上都默认的样式。不知道这个算不算IE的bug。

如何解决？
只需要将其设置为inside的样式（list-style-position: inside），便可以像如下这样：

综上：上述的解决方案需要单独做IE的兼容，即判断是IE后，增加一个类，使得点在内部，并且left归为0。

/*IE需增加如下属性：*/
li.isIE{
  list-style-position: inside;
  left: 0;
 }

最终在IE上的效果为：

2. List分栏布局不被切断

list要满足Accessibility的要求，在设计的样式为多列时，结构依旧需要在一个<ul>标签内。

可以使用column-count（IE9及以下不支持）实现多列。

如下图，第三项被截断了一部分放在了第二列。那问题来了，如果不想被截断，按照最小粒度是item进行分栏怎么办呢？

设置如下即可：

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

效果如下：

demo: https://jsfiddle.net/4L8qnk5z/3/

---

未完待续