私は3つのdivにテキストとイメージの両方を含んでいます。フロート左、中央、浮動小数点同じ行の3 div

左に第1のdiv、中央に第2のdiv、右側に第3のdivと同じ行に示したいと思います。私は第1のdivと第3のdivのCSSをすることができます。 2番目のdivは私に問題を引き起こします。私はこれまでのフォローコードを持っています：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
     .onLeft { 
      display: inline; 
      float: left; 
     } 
     .onRight { 
      display: inline; 
      float: right; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="onLeft"><h3>Left</h3><img src=images/left.png></div> 
     <div class="onCentre"><h3>Centre</h3><img src=images/centre.png></div> 
     <div class="onRight"><h3>Right</h3><img src=images/right.png></div> 
    </body> 
</html>

何か提案がありますか？

出典

2016-06-01 pat

あなたは特にそのような浮動小数点数を使用する必要がありますか？あなたはちょうど浮くことができません：左;それらのすべて（したがって、彼らは1つの行を次々に得る）？あるいは、フレックスボックス（https://css-tricks.com/snippets/css/a-guide-to-flexbox/、align-items：stretch）を使用してみてください。 –

3つのdivすべてに 'float：left'を追加してみてください。あるいは、ある人がこれを提案して、1行（ 'tr'）のテーブルを作り、内部にそれぞれの画像が入った3つの' td'タグを持っていると私が叫ぶでしょう。 –

少し明確にしましょう。 Webページの左、中央、右の3 divがすべて同じ水平線上にあるようにしたいと思います。テーブルは機能しません。 – pat

私は3 div要素だから可変幅に

を持つことができるよう修正幅を持っている必要はありません：

オプション1

はdisplay:table/table-cell

を設定

section { 
 
    display: table; 
 
    width: 100% 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: table-cell; 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

オプション2

は、だからあなたの要件は、左ページの各部分に3つのdivの広がりを持つことであるdisplay:flex

section { 
 
    display: flex; 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    flex:1 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

出典

2016-06-01 16:33:25 dippas

3 divが可変幅を持つことができるので、固定幅を持つことは望ましくありません。 – pat

画面幅がわからないため、固定幅は実用的ではありません。画面が幅より広い場合は、右側にスペースが残っていて、3番目のdivがすべて右に表示されます。 – pat

上記のほとんどのオプションで安全に削除できます。デモ用に使用します目的。 – dippas

を設定シーネクタイと右。あなたは実際に列レイアウトを探しているわけではありません。追加のdivを使用してこれを行うことができます。これを行う1つの方法であるjsfiddleリンクを確認してください。

.onLeft { 
    display: inline; 
    float: left; 
    width: 30%; 
    background-color: #ccc; 
} 
.onCentre { 
    float: left; 
    width:40%; 
    background-color: red; 
} 
.realCentre { 
    margin: 0 auto; 
    width: 90%; 
    background-color: #efefef; 
} 

.onRight { 
    display: inline; 
    float: right; 
    width: 30%; 
    background-color: #ddd; 
}

出典

2016-06-01 16:34:34 TeaCode

1番目のdivと2番目のdivは一緒にくっつく – pat

@pat Okだから要件は少し異なります。私はあなたがこの効果を達成するためにちょっと騙す方法を示すjsfiddleリンクで自分の答えを更新しました。 – TeaCode

浮動小数点の代わりにインラインブロックを使用することをお勧めします。

CSS：

div {display: inline-block} 
.onLeft {width: 30%} 
.onCenter {width: 40%} 
.onRight {width: 30%}

出典

2016-06-01 16:35:49 K48

フロート左、中央、浮動小数点同じ行の3 div

答えて

オプション1

オプション2

関連する問題