这种布局用css+div该如何写?

Question

每次拿到设计稿,这种布局就弄不好,如果是单行显示还可以,上下居中就解决了.
但是右边的内容要自动换行 ,而且换行后,第一行要与左边的icon保持居中.有什么好的办法吗?
求大神解决,提前祝大家新年快乐

Answer 1

用flex布局，再设置个行高就行了。

Answer 2

每一条可以试一下左右布局

Answer 3

不把 icon 和新闻文字放到一个 div 就行了吧，把 icon 分离出来就不受文字高度所在 div 的影响（个人想法，没测试过）

Answer 4

利用overflow形成BFC：<div>&nbsp; &nbsp; <i class="dot"></i>&nbsp; &nbsp; <div class="txt">&nbsp; &nbsp; &nbsp; &nbsp; 文字&nbsp; &nbsp; </div></div>/* 主要代码 */.dot { float: left; margin-right: 1234px; }.txt { overflow: hidden; }