HTML/CSS mehr Spalten

Question

Ich versuche, den besten Weg, um herauszufinden, diese zu erstellen:

Das schwarze Rechteck entspricht kleine Symbole, und es wird Überschrift und Absatz dieses bestimmten Abschnitts. Die Symbole sollten an der Überschrift ausgerichtet sein. Der Absatz sollte direkt unter der Überschrift sein.

Answer 1

Ich würde absolut positionierte Symbole mit einem negativen Rand und Float für die 3 Spalten mit einer Breite von 33,33% verwenden.

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%;}} 

Hier eine Arbeits Demo: http://codepen.io/anon/pen/bqBNeL

Answer 2

Wenn Sie nur Symbole angezeigt wird, würde ich nicht ein Bild-Tag überhaupt als sie sind per se nicht "zufrieden". Ich würde Hintergrundbilder verwenden.

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>