web-dev-qa-db-ja.com

並んでいる2つのdiv - 流体ディスプレイ

私は2つのdivを並べて配置しようとしており、それには次のCSSを使用しています。

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTMLは単純で、ラッパーdivに左右2つのdivがあります。

<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の下にスライドします。

注：すみません、たくさん検索しました。この質問は何度も聞かれましたが、それらの答えは私を助けていません。私の場合の問題は何かを説明しました。

それに対する修正があると思います。

ありがとうございました。

編集：すみません、私のHTMLの問題、左右両側に2つの "box" divがありました、それらは％でパディングを持っていたので、左側は幅が広いのでもっとパディングを示しました。申し訳ありません、上記のCSSは完璧に動作します。その流動的な表示と修正された、間違った質問をして申し訳ありませんが...

csshtmlfluid-layoutfluid
169
Waleed

私の現在のサイトにこのCSSを使用する。それは完璧に機能します！

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
83
Waleed

Fiddle

代わりにこのようなシステムを試してください。

HTML：

<section class="container">
    <div class="one"></div>
    <div class="two"></div>
</section>

CSS：

.container {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
.one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
.two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

最初のdivの幅に等しい左余白を使用する場合は、1つのdivを浮動するだけで済みます。これは、ズームの大きさに関係なく機能し、サブピクセルの問題もありません。

208
dezman

これはflexboxを使えば簡単です。

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}
<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>
153
user4427511

これがグーグルの人たちに対する私の答えです。

CSS：

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

これがHTMLです。

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>
4
Malachi Bazar