這種布局用css+div該如何寫(xiě)?

每次拿到設(shè)計(jì)稿,這種布局就弄不好,如果是單行顯示還可以,上下居中就解決了.
但是右邊的內(nèi)容要自動(dòng)換行 ,而且換行后,第一行要與左邊的icon保持居中.有什么好的辦法嗎?
求大神解決,提前祝大家新年快樂(lè)

回答

編輯回答

笑忘初

右邊的內(nèi)容要自動(dòng)換行 ,而且換行后,第一行要與左邊的icon保持居中

文本前面的圓點(diǎn)如果不需要考慮大小的話，直接用ul就可以了，因?yàn)榱斜眄?xiàng)圖標(biāo)的顏色跟列表字體顏色是保持一致的。
demo
不知道你有沒(méi)有其他需求。

2018年3月20日 17:07

編輯回答

獨(dú)特范

不把 icon 和新聞文字放到一個(gè) div 就行了吧，把 icon 分離出來(lái)就不受文字高度所在 div 的影響（個(gè)人想法，沒(méi)測(cè)試過(guò)）

2018年5月10日 14:26

編輯回答

胭脂淚

利用overflow形成BFC：

<div>
    <i class="dot"></i>
    <div class="txt">
        文字
    </div>
</div>

/* 主要代碼 */
.dot { float: left; margin-right: 1234px; }
.txt { overflow: hidden; }

2018年8月17日 17:08

編輯回答

熊出沒(méi)

很常見(jiàn)的布局呀：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <ul>
        <li>
            <i></i>
            <a>就看那是假的可能回家啊上課的女孩開(kāi)始的機(jī)會(huì)看那是覺(jué)得好看啦</a>
        </li>
        <li>
            <i></i>
            <a>可是就打開(kāi)房間可是覺(jué)得很快樂(lè)江蘇大豐你加我額居然看那時(shí)間的話看那是的回家了愛(ài)上快點(diǎn)回家 </a>
        </li>
    </ul>
    
    <style>
        *{margin:0;padding:0;list-style:none;}
        ul{width:300px;margin:20px auto;}
        li{overflow:hidden;border-bottom:#ddd solid 1px;padding:10px 0;}
        li i{display:inline-block;width:10px;height:10px;background:#000;float:left;margin-right:5px;border-radius:50%;margin-top:5px;}
        li a{display:block;overflow:hidden;line-height:20px;}
    </style>    
</body>
</html>

圖片描述

2018年9月4日 04:13

編輯回答

近義詞

每一條可以試一下左右布局

2017年3月22日 10:20

編輯回答

你的瞳

用flex布局，再設(shè)置個(gè)行高就行了。

2017年12月20日 11:48

編輯回答

挽青絲

        li{overflow: hidden;
            border-bottom: #ddd solid 1px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            }

在上面Bestime回答的基礎(chǔ)上，將li設(shè)為彈性布局，在外面套上div即可實(shí)現(xiàn)

2018年8月11日 18:05