鍍金池/ 問答/HTML/ 這種布局用css+div該如何寫?

這種布局用css+div該如何寫?

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

回答
編輯回答
笑忘初
右邊的內(nèi)容要自動換行 ,而且換行后,第一行要與左邊的icon保持居中

文本前面的圓點如果不需要考慮大小的話，直接用ul就可以了，因為列表項圖標的顏色跟列表字體顏色是保持一致的。
demo
不知道你有沒有其他需求。

2018年3月20日 17:07
編輯回答
獨特范

不把 icon 和新聞文字放到一個 div 就行了吧，把 icon 分離出來就不受文字高度所在 div 的影響（個人想法，沒測試過）

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
編輯回答
熊出沒

很常見的布局呀：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
    <ul>
        <li>
            <i></i>
            <a>就看那是假的可能回家啊上課的女孩開始的機會看那是覺得好看啦</a>
        </li>
        <li>
            <i></i>
            <a>可是就打開房間可是覺得很快樂江蘇大豐你加我額居然看那時間的話看那是的回家了愛上快點回家 </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布局，再設置個行高就行了。

2017年12月20日 11:48
編輯回答
挽青絲
        li{overflow: hidden;
            border-bottom: #ddd solid 1px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            }

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

2018年8月11日 18:05