Halten drei divs inline

Question

Ich habe drei divs in einem Container gewickelt. Innerhalb jedes div gibt es ein Bild und einen Text darunter. Ich möchte alle drei divs nebeneinander halten und reagieren. Ich hatte das vorher eingerichtet, wo es blieb, wie ich es wollte, aber jetzt fällt das richtige Div unter die anderen beiden, wenn der Bildschirm schrumpft und dann der mittlere fällt. Ich weiß, dass ich alle drei nebeneinander behalten kann, weil ich es vorher schon gemacht habe. Ich kann einfach nicht herausfinden, wie ich es gemacht habe.

html

<div id='container'> 

    <div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 

    <div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 

    <div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 

    <div> 

CSS

.one-third { 
    width: 30%; 
    display: inline-block; 
    margin: 5% 0 0 2.5%; } 

.one-third img { 
    width: 100%; 
    height: 300px; } 

.one-third h3 { 
    margin: .5em 0 2em 0; } 

Answer 1

Es half nicht, dass Sie eine nicht geschlossene <a> Tags hatte und ich rate, dass Sie auf der <img> keine Höhe festgelegt, es sei denn, Sie das Bild wollen zu verzerren, wenn die Sicht Skalierung.Aber das Problem zu beheben, die Sie gefragt haben, kann es einfach durch gelöst werden:

• ändern: display: inline-block-display: block in .one-third {}
• Hinzufügen: float: left; in .one-third {}
• JSFiddle für Sie

Corrected Code:

.one-third { 
    max-width: 30%; 
    display: block; 
    float: left; 
    padding: 5% 0 0 2.5%; 
} 

.one-third img { 
    width: 100%; 
} 

.one-third h3 { 
    padding: 0.5em 0 2em 0; 
} 

<div id='container'> 
    <div class='one-third'> 
     <a> 
      <img src='http://gratisography.com/pictures/264_1.jpg'> 
      <h3>Headline</h3> 
     </a> 
     <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 
    <div class='one-third'> 
     <a> 
      <img src='http://gratisography.com/pictures/264_1.jpg'> 
      <h3>Headline</h3> 
     </a> 
     <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 
    <div class='one-third'> 
     <a> 
      <img src='http://gratisography.com/pictures/264_1.jpg'> 
      <h3>Headline</h3> 
     </a> 
     <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 
</div> 

Answer 2

Ihr Code zu funktionieren scheint, als Sie erwarten, siehe unten.

Wenn Sie Ihre Seite ausreichend verkleinern, wird die Breite des Wortes "Headline" in h3 größer als 1/3 der Seitenbreite sein, wodurch die Inline-Block-Elemente den Zeilenumbruch erzwingen.

Wenn Sie versucht haben, CSS-Tabellen zu verwenden, könnten Sie alle drei Elemente in einer einzelnen Zeile behalten, aber dann würden Sie eine Überlaufbedingung auslösen.

Sie müssen darüber nachdenken, wie sich Ihr Layout im extremen, engen Fall verhalten soll.

.one-third { 
 
    width: 30%; 
 
    display: inline-block; 
 
    margin: 5% 0 0 2.5%; 
 
} 
 
.one-third img { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
.one-third h3 { 
 
    margin: .5em 0 2em 0; 
 
}

<div id='container'> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
    </a> 
 
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p> 
 
    </div> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
    </a> 
 
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p> 
 
    </div> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
    </a> 
 
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p> 
 
    </div> 
 

 
    <div>

Answer 3

Versuch box-sizing: border-box; zum .one-third Regel hinzuzufügen. Dies sorgt auch für die Einbeziehung von Rändern und Padding in die Gesamtbreite eines Elements.

Answer 4

Setzen Sie die font-size des übergeordneten Elements auf 0, und setzen Sie die Childs dann auf die vorherige Größe zurück. Für eine Demo habe ich die div-Tags auf genau 33% der Eltern eingestellt jeder:

.one-third { 
 
    width: 33%; 
 
    display: inline-block; 
 
    margin: 0%; 
 
    font-size: 12px; 
 
} 
 
.one-third img { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 
.one-third h3 { 
 
    margin: .5em 0 2em 0; 
 
} 
 
#container { 
 
    font-size: 0; 
 
}

<div id='container'> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
    </a> 
 
    <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a> 
 
    </div> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
     <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p></a> 
 
    </div> 
 

 
    <div class='one-third'> 
 
    <a> 
 
     <img src='http://gratisography.com/pictures/264_1.jpg'> 
 
     <h3>Headline</h3> 
 
     <p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities.</p> 
 
</a>  
 
</div> 
 

 
    <div>

^{Credits @Marc Audet gehen müssen für die weitere bemerken Ihre <a> Tags geschlossen werden müssen für korrekte HTML Markup.}

Answer 5

Alles was Sie tun müssen, ist eine float: left; zu .one-third

Hier fügen Sie ist ein Arbeits JSFiddle: https://jsfiddle.net/05x1p2ch/

Answer 6

entfernen Räume zwischen divs:

<div id='container'> 

    <div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3></a><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div><div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div><div class='one-third'> 
     <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>Headline</h3><p>Medieval texts date the arrival of the Vikings in the British Isles to the 790s A.D., when fierce raiders from Scandinavia suddenly appeared along the coasts, plundering rich monasteries and terrorizing local communities. </p> 
    </div> 

    <div> 

Oder Eigenschaft float verwenden.