Meine floated Elemente werden zu weit nach links gezogen

Question

Ich bin neu in CSS, und ich habe in den vorherigen Foren zu diesem Thema Hilfe gesucht. Ich denke, ich mache alles richtig, aber meine schwebenden Elemente werden nach links gezogen.

Hier ist mein Code:

div { 
display: block; 
} 

.grid { 
width: 660px; 
position: relative; 
float: left; 
padding-bottom: 10px; 
clear: left; 
} 

.home { 
text-align: center; 
float: left; 
width: 33.3333333%; 
position: relative; 
padding: 25px; 
} 

.third { 
display: inline-block; 
position: relative; 
float: left; 
height: 150px; 
width: 150px; 
border-radius: 25px; 
} 

.third img { 
float: left; 
position: relative; 
} 

Und mein html:

<div class="grid"> 
<article class="home"> 
    <article class="third"> 
<img src="" /></article> 
</article> 
    <article class="home"> 
    <article class="third"> 
    <img src="" /></article> 
</article> 
    <article class="home"> 
    <article class="third"> 
    <img src="" /></article> 
</article> 
</div> 

Hilfe bitte!

Answer 1

ich noch nicht kommentieren ...

Your original code on fiddle

Das Problem kommt aus padding in .home Klasse.
Ich habe deaktiviert padding:25px; hier in .home Klasse, weil padding zu width in CSS hinzugefügt:

The modified version (without padding) on fiddle

Jetzt ist es nicht "auf der linken Seite zu weit gezogen".

Was Sie stattdessen tun können, ist margin:25px;-.third Klasse hinzuzufügen, wie folgt aus:

The modified version (with margin) on fiddle

EDIT: SAUBER REVISITED VERSION:

Der HTML-Code:

<div class="grid"> 
    <article class="home"> 
     <div class="third"> 
     <img src="http://lorempicsum.com/nemo/350/200/1" /> 
     </div> 
    </article> 
    <article class="home"> 
     <div class="third"> 
     <img src="http://lorempicsum.com/futurama/350/200/6" /> 
     </div> 
    </article> 
    <article class="home"> 
     <div class="third"> 
     <img src="http://lorempicsum.com/up/350/200/6" /> 
     </div> 
    </article> 
    </div> 

Der CSS-Code :

.grid { 
    width: 660px; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    clear: left; 
} 

.home { 
    text-align: center; 
    float: left; 
    width: 33.3333333%; 
} 

.third { 
    display:table-cell; 
    height: 150px; 
    width: 150px; 
    padding: 25px; 
    border-radius:25px; 
    vertical-align:middle; 
    background-color:#eee; //added just for test display 
} 

.third img { 
    border:none; 
    width: 100%; 
    height: auto; 
} 

The result here on fiddle.

Bilder sind adaptative, zentriert vertikal und horizontal.
.third Klasse haben hellgraue Hintergrundfarbe nur zum Testen und Anzeigen der gebogenen Ränder und der zentrierten Bilder darin.
Ich habe auch in HTML-Code ersetzt, der zweite <article> Tag von einem <div> Tag, weil es redundant ist.

Answer 2

Bitte verwenden Sie den aktualisierten Code, ich denke, es wird funktionieren.

div { 
    display: block; 
} 
.grid { 
    width: 660px; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    clear: left; 
} 
.home { 
    text-align: center; 
    float: left; 
    width: 33.3333333%; 
    position: relative; 
    padding: 25px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.third { 
    display:block; 
    border-radius: 25px; 
} 
.third img { 
    width:100%; 
    height:auto; 
} 

Answer 3

Hier ist eine mögliche Korrektur des Codes Sie:

See this fiddle

ich ein wenig die HTML-Struktur wie folgt geändert haben:

<section class="home"> 
    <article class="third"> 
    <img src="http://lorempicsum.com/futurama/350/200/1" /> 
    </article> 
    <article class="third"> 
    <img src="http://lorempicsum.com/futurama/350/200/1" /> 
    </article> 
    <article class="third"> 
    <img src="http://lorempicsum.com/futurama/350/200/1" /> 
    </article> 
</section> 

Es ist für die semantische besser haben section um article und nicht article um article.

Ich habe den CSS-Code wie folgt vereinfachen:

section.home { 
    width: 660px; 
    position: relative; 
    float: left; 
    padding-bottom: 10px; 
    clear: left; 
} 

article.third { 
    text-align: center; 
    float: left; 
    width: 150px; 
    position: relative; 
    padding: 25px; 
    overflow: hidden;  
} 

.third img { 
    border-radius: 25px; 
    width: 100%; 
    position: relative; 
} 

Wenn Sie Flüssigkeit width für Behälter verwenden, dann Flüssigkeit width für padding/margin von Artikel.

In diesem Fall verwende ich feste width des Behälters und für padding Werte.