0

コンテナー div に 2 つの div がある単純な Web ページがあります。

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  height: 50px;
  width: 100%;
}

#left, #right {
  float: left;
  height: 100%;
  line-height: 100%;

}

コンテンツは div を埋めないため、コンテンツで拡張する必要はありませんが、div は同じ量のパディングを持ち、#container div を埋める必要があります。以前は明確ではありませんでしたが、両方の div には同じパディングが必要ですが、幅は異なります。1 つは名前を含み、もう 1 つは電子メール アドレスを含むため、2 番目ははるかに長くなります。

divがコンテナdivの幅を埋めるように取得できません。#right div の後にスペースがあります。

また、すべてパーセンテージに基づいており、固定レイアウトではなく、CSS のみです。

簡単に思えるので、誰かが私を正しい方向に向けることができますか?

4

4 に答える 4

2

現在、2 つのフローティング要素に幅が設定されていません。1つ追加するとすべてが解決しました：

#container {
  overflow: hidden;
  background: green;
}

#left, #right {
  float: left;
  box-sizing: border-box;
  width: 50%;
  padding: 5% 10%;
  text-align: center;
}

#left  { background: red  }   
#right { background: blue }
​

フィドル: http://jsfiddle.net/u4G7c/1/

于 2012-05-21T15:43:08.803 に答える
1 
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  height: 50px;
  width: 100%;
}

#left, #right {
  float: left;
  width:46%; padding:2%;
  height: 96%;
  line-height: 100%;

}
于 2012-05-21T15:42:11.503 に答える
1

ボーダーとパディングなしで、DIVsawidthを50%. ボーダーとパディングが必要な場合は、widthofを指定50%して に設定box-sizingしborder-boxます。

于 2012-05-21T15:43:58.330 に答える
0

いくつか変更を加えましたが、最も重要なのは、を#right削除float: leftしてから追加することoverflow: hiddenでした。

参照： http： //jsfiddle.net/thirtydot/2AS58/

HTML：

<div id="container">
    <div id="left">left</div>
    <div id="right">right@sdfgsdfsdf.com</div>
</div>​

CSS：

#container {
    border: 1px solid red;
    margin: 10px;
}

#left, #right {
    padding: 10px;
    height: 30px;
    line-height: 30px;
    border: 1px solid blue;
}
#left {
    float: left;
}
#right {
    overflow: hidden;
}​
于 2012-05-23T01:38:10.840 に答える