幅の広い単一のdivの下に3つのdivボックスを並べて配置します
ラーパー
3つのdivをすべて別のdivの下に並べて表示しようとしています（h1とその下に小さなテキストが含まれています）。私はそれをするのにいくつかの問題を抱えています。
私が目指しているのは次のようなものです。 
メインタイトルのdivの下にdiv（他の3つのdivを含む）を配置しようとしました。
私はこのCSSを試しました：
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
これが私がこれまでに得たもののJSFiddleです：http：//jsfiddle.net/4zx9gxgL/
何か提案/アイデアはありますか？
マイケルベンジャミン
これを行うにはいくつかの方法があります。CSS table、floatおよびposition3つの可能なソリューションを提供します。全体的な目的に応じて、inline-block（no table、no float、no position）を備えたソリューションがあります。このソリューションは非常にシンプルで、安定していて、応答性が高く、カスタマイズが簡単です。
デモ： http ：//jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
更新
私はあなたのフィドルデモも更新しました。
http://jsfiddle.net/4zx9gxgL/33/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：GitHubの[ZIPのダウンロード]リンクを使用するときに、リポジトリのどのファイルをmaster.zipに含めるかを指定します
- 次の投稿：Oracle SQL：エラーコードごとのエラーカウントが間違っています
関連記事
Related 関連記事
- 1
divの右下隅に2つのボタンを並べて配置します
- 2
3つのフレックスdivを並べて配置する方法
- 3
親の幅に関係なく、divを並べて配置します
- 4
3つのUIButton（同じ幅）を並べて配置します
- 5
自動幅の3つのdivは、最も広いdivと同じ幅になり、各divをそのコンテンツと同じ幅にします。
- 6
テキストボックスのすぐ下にdivを配置します
- 7
3つの子divを中央に配置し、すべて幅を100％にしますか？
- 8
ヘルプが必要です3つのdivを並べて配置します
- 9
jQueryは、値に基づいてdiv内のチェックボックスを並べ替えます
- 10
HTMLは2つのdivを並べて配置します
- 11
3 つの div を横に並べて、一番右の div が残りの幅を占めるにはどうすればよいですか?
- 12
幅50％、高さ100％の2つのdivボックスを並べて、各ボックスにカーソルを合わせると、幅全体が100％になります。
- 13
HTMLで2つのdivを並べて配置する際の問題に直面しています
- 14
ページ幅全体をカバーする2つのdivを並べて配置します
- 15
2つのdivを並べて配置し、3番目のdivを2番目のdivに揃えるにはどうすればよいですか？
- 16
2つのdivを並べて配置し、3番目のdivを2番目のdivに揃えるにはどうすればよいですか？
- 17
ボックス（div）は最初のボックスよりも下に配置されていますか？
- 18
Reactでdivごとに2つの要素を並べて配置します
- 19
2divの固定幅と流動幅を並べて4つのスクロールバーをブートストラップします。
- 20
マージンとボーダーを使用して3つのdivを並べて配置するにはどうすればよいですか？
- 21
1つのdivを他のdivの下に配置します
- 22
小さい画面の列形式から広い画面の単一行に2つのdivを再配置する
- 23
複数のチェックボックスを含むdiv内の1つのチェックボックスがオンになっている場合は、すべてのチェックボックスにクラスを追加します
- 24
Divの配置-divのスタックの隣に1つの大きなdivを配置します
- 25
2つのdivを並べて配置し、1つを伸ばしてスペースを占有します
- 26
divラッパー内に3つの隣接するdiv列を作成しようとしています。div列の幅は同じですが、1つは常に他の2つより下にプッシュされます
- 27
通貨入力用に並べて1つのボックスにdivを作成する方法
- 28
3つのdivを並べて配置する
- 29
2つのajaxヘルパーテキストボックスを並べて配置します
コメントを追加