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>