HTML/CSS、複数の列

Question

私はこれを作成するための最良の方法を把握しようとしています：

を黒い四角は小さいアイコンを表し、見出しおよびその特定のセクションの段落があります。アイコンは見出しに揃えてください。段落は見出しのすぐ下にある必要があります。

Answer 1

負のマージンを持つ絶対配置アイコンを使用し、33.33％の幅で3つの列を浮動させます。

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>