Responsive Widths

Question

Ich versuche drei divs zu bekommen, die jeweils ein Drittel der Breite einnehmen (33%), aber wenn ich die Größe des Fensters verändere, springen sie überall herum und sind nicht richtig ausgerichtet. Was mache ich falsch?

HTML

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 

CSS

.step{ 
    width:33%; 
    height:200px; 
    display:inline-block; 
} 
.fa{ 
    color:darkgray; 
    width:100%; 
    margin-top:5%; 
} 
i{ 
    text-align:center; 
} 
.step p{ 
    padding:5%; 
    text-align:center; 
} 

Answer 1

Das Problem ist, dass die Leerzeichen zwischen den div-Elemente auch Platz in Anspruch nimmt (weil sie display:inline-block sind).

Lösung 1: die Leerzeichen entfernen

Benutze HTML-Kommentare, die Leerzeichen zu entfernen (auch vertical-align:top fügen Sie sie oben ausgerichtet zu halten, wenn sie unterschiedliche Höhen haben)

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div><!-- 
 
--><div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

---

Lösung 2: Verwenden float:left

.step{ 
 
    width:33%; 
 
    height:200px; 
 
    float:left; 
 
} 
 
.fa{ 
 
    color:darkgray; 
 
    width:100%; 
 
    margin-top:5%; 
 
} 
 
i{ 
 
    text-align:center; 
 
} 
 
.step p{ 
 
    padding:5%; 
 
    text-align:center; 
 
}

<div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
</div> 
 
<div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
</div>

---

Lösung 3: Verwendung flexbox (modernsten und geeignetere heutzutage)

Dies benötigt ein Wrapper-Element.

.steps{display:flex} 
 
.step { 
 
    height: 200px; 
 
    flex: 0 0 1; 
 
} 
 
.fa { 
 
    color: darkgray; 
 
    width: 100%; 
 
    margin-top: 5%; 
 
} 
 
i { 
 
    text-align: center; 
 
} 
 
.step p { 
 
    padding: 5%; 
 
    text-align: center; 
 
}

<div class="steps"> 
 
    <div class="step"> 
 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
 
    </div> 
 
    <div class="step"> 
 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
 
    <p>Look out for links and prompts in our emails and newsletters</p> 
 
    </div> 
 
</div>

Answer 2

Dies ist ein Nebeneffekt der display: inline-block; statt float verwenden.

Wenn inline-block verwenden, ist Ihr Browser als Räume alle Zeilenumbrüche im Code behandeln wird, so was tatsächlich in Ihrem Fall zu machen ist:

div (space) div (space) div 

Durch die Zeilenumbrüche im Code zwischen divs Entfernen , können Sie das beheben. Oder Sie könnten float: left; und ein Clearing-Element später verwenden.

Entfernen der Zeilenumbrüche:https://jsfiddle.net/qzdxtwhx/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div><div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div><div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 

Mit float:https://jsfiddle.net/qzdxtwhx/1/

<div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
</div> 
<div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
</div> 
<div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
</div> 
<div class="clear"></div> 

.step{ 
    width:33%; 
    height:200px; 
    float: left; /*Replace display: inline-block; */ 
} 

.clear { /*Add a 'clear' element to preserve natural layout*/ 
    clear: both; 
} 

Answer 3

Sie müssen Schwimmer verwenden: left; und entferne Anzeige: Inline-Block; Ersetzen Sie Ihre .step css durch die folgenden

.step {Breite: 33%; Höhe: 200px; float: left;}

die Float-Eigenschaft wird sehr sehr häufig verwendet. Meiner Meinung nach ist es ein wenig unintelligent für Anfänger.

Answer 4

Umhüllen Sie sie in ein Eltern-Div und setzen Sie die Font-Größe dieses Divs auf 0, dies wird die Zeilenumbrüche los, die die Schritte auf separate Zeilen brechen. Sie können Floats verwenden, wie Santi es vorschlägt, aber ich bevorzuge es, mit Inline-Blöcken persönlich zu arbeiten, ich finde es kugelsicherer, Floats müssen gelöscht werden und können nicht vertikal ausgerichtet werden.

<div class="parent"> 
    <div class="step"> 
    <i class="fa fa-user-o fa-4x " aria-hidden="true"></i> 
    <p>Bookmark this page in your browser and check back on the first of each month</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-bookmark-o fa-4x " aria-hidden="true"></i> 
    <p>Log in and select ‘My Account’ at any time to find a link to this page</p> 
    </div> 
    <div class="step"> 
    <i class="fa fa-envelope-o fa-4x " aria-hidden="true"></i> 
    <p>Look out for links and prompts in our emails and newsletters</p> 
    </div> 
</div> 

CSS:

.parent{ 
    font-size: 0; 
}