wie beiden Symbole erhalten und in derselben Zeile in css

Question

Ich möchte auf dem Icon und die Überschriften in der gleichen Zeile wie diese Überschrift:

aber ich habe immer noch so:

Der Code:

.icon-small i{ 
 
    height: 38px; 
 
    width: 38px; 
 
    color: #fff; 
 
    background-color: #888; 
 
    border-radius: 10%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding-top: 12px; 
 

 
} 
 
.icon-small + p{ 
 
    margin-top: 15px; 
 

 
} 
 
.icon-small h4, 
 
.icon-small h5{ 
 
    text-align: left; 
 
}

<div class="row"> 
 
    <div class="col span-1-of-3"> 
 
    <span class="icon-small"> 
 
     <i class="fa fa-television"></i> 
 
     <h4>Web applications</h4> 
 
     <h5>Mobile & Tablets Ready</h5> 
 
    </span> 
 
    <p>Powerful, fast and robust web applications to cater for complex business needs.</p> 
 
    </div> 
 
    <div class="col span-1-of-3"> 
 
    <span class="icon-small"> 
 
     <i class="fa fa-mobile-phone"></i> 
 
     <h4>Mobile apps</h4> 
 
     <h5>For the iPhone, iPad & Android</h5> 
 
    </span> 
 
    <p>Apps that connect directly to your customers.</p> 
 
    </div> 
 
    <div class="col span-1-of-3"> 
 
    <span class="icon-small"> 
 
     <i class="fa fa-image"></i> 
 
     <h4> Graphic </h4> 
 
     <h5>Infographics, site designs and more</h5> 
 
    </span> 
 
    <p>Let our graphics speak the thousand words that you simply don't have the time to say.</p> 
 
    </div> 
 
</div>

Ich habe nur ein paar Dinge, aber es hat nicht funktioniert. Ich habe Font Awesome und Responsive Grid System verwendet.

verwendete ich dies die Standardstile zurücksetzen:

* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box; 
} 

Answer 1

Ich glaube, Sie auf das Symbol float wollen:

.icon-small i { 
    float: left; 
    margin-right: 10px; 
    /* ... */ 
} 

Und für eine gute Maßnahme:

.icon-small + p { 
    clear: left; 
    /* ... */ 
} 

https://jsfiddle.net/mblase75/e42rsw04/

Answer 2

Gerade position:absolute innerhalb des Symbol-Textblock für das Symbol verwenden.

.icon-small { 
    position: relative; 
    padding: 0 0 0 48px; /* 38px icon width + 10px gap between icon and text */ 
} 

.icon-small i { 
    height: 38px; 
    width: 38px; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Answer 3

Sie können entweder Display verwenden: inline-block auf der übergeordneten und display: inline auf die Kinder - oder können Sie verwenden, um die: vor Pseudo und positionieren Sie es mit absoluten Positionierung.

<div class="logo"> 
    <div class="text">Some Text</div> 
</div> 

.text{ 
    position:relative; 
} 

.text::before { 
    position:absolute; 
    margin-left: -30px; 
    background-image: url("youricon.png"); 
    background-color: #fff; 
    height:<<height of your icon goes here>>; 
    width:<<width of your icon goes here>>; 
} 

ODER

<div class="logo"> 
    <div class="icon"><img src="youricon.png" alt="Logo"></div> 
    <div class="text">Some Text</div> 
</div> 


.logo{ 
    display: inline-block; 
    width: 100%; 
} 

.icon, .text { 
    display:inline; 
} 

.text{ 
    margin-left:10px; 
} 

Answer 4

Da vorgeschlagen niemand Flexbox mit einem Blick in diese im HTML-Teil http://jsfiddle.net/hnsd4np6/2/

<div class="row container"> 
<div class="col span-1-of-3 box"> 
    <span class="icon-small"> 
    <i class="fa fa-television"></i> 
    <div class="details"> 
    <h4>Web applications</h4> 
    <h5>Mobile & Tablets Ready</h5> 
    </div> 
</span> 
<p>Powerful, fast and robust web applications to cater for complex business needs.</p> 
</div> 
<div class="col span-1-of-3 box"> 
    <span class="icon-small"> 
    <i class="fa fa-mobile-phone"></i> 
    <div class="details"> 
     <h4>Mobile apps</h4> 
     <h5>For the iPhone, iPad & Android</h5> 
    </div> 
</span> 
<p>Apps that connect directly to your customers.</p> 
</div> 
<div class="col span-1-of-3 box"> 
    <span class="icon-small"> 
    <i class="fa fa-image"></i> 
    <div class="details"> 
     <h4> Graphic </h4> 
     <h5>Infographics, site designs and more</h5> 
    </div> 
</span> 
</div> 
</div> 

Einige der Sache neu hinzugefügte nehmen sind

1. hinzugefügt Klasse container die Klasse row
2. hinzugefügt, um eine Klasse box Klasse col span-1-of-3, um jedes Produkt zu trennen separat
3. Added Klasse details das Symbol und seine Beschreibungen zu trennen
   
   CSS

Stile für die oben neu hinzugefügten Klassen

.icon-small{ 
display:flex; 
flex-direction:row; 
align-items:center; 
} 
    .details{ 
    padding:0 1em; 
    } 
.box{ 
    border:1px solid #333; 
    background-color:#fff; 
    width:300px; 
    padding:1em; 
    } 
    .container{ 
    display:flex; 
    flex-direction:row; 
    flex-wrap:wrap; 
    border:1px solid #333; 
    background-color:powderblue; 
    } 

<br> 

wenn Sie wollen mehr über Flexbox wissen clickhere