3つのdivsをインラインに維持

Question

コンテナ内に3つのdivがラップされています。各部門内には、その下にイメージとテキストがあります。私はすべての3つの部門を横並びにして対応したいと思っています。私はこれを望んでいた場所の前に設定しましたが、画面が縮小して中間のものが落ちると、右のdivが他の2つの下に落ちます。私は前にそれをしていたので、私は3つを横に並べることができることを知っています。私はどうしたのか分かりません。

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

それはあなたが閉じられていない<a>タグを持っていたこと助けにはならなかったと私はあなたが視点をスケーリングするとき、画像が歪むする場合を除き、あなたは、<img>上の高さを設定しないことをお勧めします。変更

• ：.one-third {}
• でdisplay: blockからdisplay: inline-block追加：.one-third {}でfloat: left;あなた
はこちら
• JSFiddleをしかし、あなたが求めてきました問題に対処するために、それがするだけで解決することができます

修正コード：

.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

あなたのコードは、あなたが期待するとして働いているように見える、以下を参照してください。

ページを十分に縮小すると、最終的にh3の単語 "見出し"の幅がページ幅の1/3より大きくなり、インラインブロック要素の折り返しが強制的に開始されます。

CSSテーブルを使用しようとすると、3つの項目をすべて1行に保存できますが、オーバーフロー条件が発生します。

極端で狭いケースでレイアウトをどのように動作させるかについて考える必要があります。

.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

.one-thirdルールにbox-sizing: border-box;を追加しよう。これはまた、要素の幅全体にマージンとパディングを含めることにも役立ちます。

Answer 4

親のfont-sizeを0に設定してから、子を以前のサイズに「リセット」します。

.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>

^{クレジットがクローズする必要があり、さらにあなたの<a>タグに気付いため@Marc Audetに行く必要があります。デモのために、私は親のちょうど33％それぞれにdivを設定しています正しいHTMLマークアップのために。}

Answer 5

あなたがする必要があるのはここfloat: left;.one-thirdへ

を追加している作業JSFiddleです： https://jsfiddle.net/05x1p2ch/

Answer 6

divの間のスペース削除：

<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> 

やフロートプロパティを使用します。