[解決済み】2つのdivを並べる-流体表示【重複あり
2022-04-07 20:54:27
質問
私は2つのdivを横に並べて配置しようとしており、そのために以下のCSSを使用しています。
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
HTMLはシンプルで、ラッパーのdivの中に左右のdivが2つずつ入っています。
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
StackOverflowや他のサイトでも何度も良い方法を探そうとしましたが、正確なヘルプを見つけることができませんでした。
というわけで、一見するとうまくいくコードです。問題は、左のdivが、幅を(%)で増加させると自動的にパディング/マージンを取得することです。そのため、幅が65%のとき、左のdivにはパディングやマージンがあり、右のdivと完全に一致しないのですが、パディングやマージンを0にしてみましたが、うまくいきませんでした。次に、ページを拡大すると、右のdivが左のdivの下にスライドし、そのような流動的な表示ではありません。
注:すみません、たくさん検索しました。この質問は何度もされていますが、それらの回答は私の助けにはなっていません。私の場合、何が問題なのかを説明しました。
修正方法があればいいのですが。
ありがとうございました。
EDIT: すみません、私のHTMLの問題で、左右に2つの "box" divがあり、それらは%でpaddingを持っていました、それで左側は幅が大きいのでより多くのpaddingを示しました。上記のCSSは完璧に動作し、その流動的な表示と固定された、間違った質問をして申し訳ありません...
解決方法は?
このCSSを現在のサイトに使用しています。完璧に動作しています。
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] 位置は絶対だが、親に対して相対的
-
[解決済み] div が残りの水平スペースを埋めるようにするにはどうしたらいいですか?
-
[解決済み] CSSでパディングがある場合に、TextAreaの幅をはみ出さずに100%にするにはどうしたらよいですか?
-
[解決済み] フレックスコンテナ内の残りの高さまたは幅を埋める
-
[解決済み] DIVを等間隔に配置した場合の流体幅
-
[解決済み】divを横に並べて配置する方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】WebページでWindows 95のフォントを使用する
-
[解決済み】#記号のHTML文字実体は何ですか?
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] 背景画像を前後にパンするCSS【非公開
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み】divを横に並べて配置する方法