1. ホーム
  2. ハイパーリンク

[解決済み】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;
}