HTML/CSS多列

Question

我試圖找出創造最好的辦法：

黑方塊代表小圖標，並有標題和某些部分的段落。圖標應該與標題對齊。該段落應該在標題下方。

Answer 1

我會使用帶有負邊距的絕對定位圖標和3列寬度爲33.33％的浮點。

HTML：

<div class="row"> 
    <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div> 
    <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div> 
    <div class="col"><img src="" /><h2>Heading</h2><p>Paragraph</p></div> 
</div> 

CSS：

* {box-sizing: border-box;} 
.row {overflow: auto;} 
.col {width: 33.33%; float: left; padding-left: 100px;} 
.col img {position: absolute; width: 80px; margin-left: -100px;} 

@media (max-width: 991px) {.col {width: 100%;}} 

這裏工作演示：http://codepen.io/anon/pen/bqBNeL

Answer 2

如果你只是顯示圖標，我不會用一個圖像標記在所有的他們本身不是「內容」。我會使用背景圖片。

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    background-repeat: no-repeat; 
 
    float: left; 
 

 
    /*Adjust the below lines based on your icon size*/ 
 
    padding-left: 55px; 
 
    width: calc(33% - 55px); 
 
    
 
} 
 

 
h2 { 
 
    /*Adjust the below lines based on your icon size and aligning requirements*/ 
 
    margin-top: 12px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.bill { 
 
    background-image: url(http://fillmurray.com/50/50); 
 
} 
 

 
.city { 
 
    background-image: url(http://lorempixel.com/output/city-q-c-50-50-7.jpg); 
 
} 
 

 
.cat { 
 
    background-image: url(http://lorempixel.com/output/cats-q-c-50-50-7.jpg); 
 
} 
 

 
.food { 
 
    background-image: url(http://lorempixel.com/output/food-q-c-50-50-7.jpg); 
 
} 
 

 
.sports { 
 
    background-image: url(http://lorempixel.com/output/sports-q-c-50-50-7.jpg); 
 
}

<ul> 
 
    <li class="bill"> 
 
    <h2>Bill Murray</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="city"> 
 
    <h2>City</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="cat"> 
 
    <h2>Cat</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="food"> 
 
    <h2>F00d</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="sports"> 
 
    <h2>Sports</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="bill"> 
 
    <h2>Bill Murray</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
    <li class="cat"> 
 
    <h2>Cat</h2> 
 
    <p>Some Para</p> 
 
    </li> 
 
</ul>