[解決済み】インラインブロックのDIVをコンテナ要素の上部に揃える
2022-04-05 14:11:46
質問
2つの場合
inline-block
div
の高さが違うのに、なぜ短い方が容器の上部に揃わないのでしょうか? (
DEMO
):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
小物の位置合わせはどうすればいいのか
div
を、その容器の上部に置くのですか?
どのように解決するのですか?
なぜなら
vertical-align
が設定されます。
ベースライン
をデフォルトとします。
使用方法
vertical-align:top
ではなく
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
または
@f00644
を適用できるって
float
を子要素にも適用する。
関連
-
[解決済み】DIVの幅が100%というのは本当の100%ではない
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] CSSでボーダーの不透明度を設定することはできますか?
-
[解決済み] Railsです。railsでcssから背景画像を設定する方法は?
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] 子 div が親 div からはみ出さないようにする。
-
[解決済み] 幅・高さをピクセル単位からパーセント単位で設定する。
-
[解決済み] CSSで背景画像を着色する方法を教えてください。
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] display: inlineとdisplay: inline-blockの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み】div間の空白を削除する
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] SVGの塗りつぶし色が効かない
-
[解決済み] iframe 要素の scrolling 属性は廃止されました。代わりにCSSを使用してください。
-
[解決済み] HTMLとCSSのBackground-imageが表示されない
-
[解決済み] cssでこの要素を取得するには
-
[解決済み] ChromeでCSSが効かない
-
[解決済み] ブルマのテーブルをレスポンシブにするにはどうしたらいいですか?
-
[解決済み] codepenでfont awesomeを使用する