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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

利用overflow形成BFC：

<div>

    <i class="dot"></i>

    <div class="txt">

        文字

    </div>

</div>

/* 主要代码 */

.dot { float: left; margin-right: 1234px; }

.txt { overflow: hidden; }