1

私はこのコードを持っています:

<div style="margin: 0px; padding: 0px;">

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; left: 0; margin-bottom: 10px; position: relative;">
....
</div>

<div style="border: 1px solid #aaaaaa; padding: 8px; width: 40%; top: 0; right: 0; margin-bottom: 10px; position: relative;">
....
</div>

</div>

私の最終的な目標は、2 つのボックスがそれぞれ幅の 50% を共有し、その間に余白があることです。

代わりに、それらは私が望まない互いの下に表示されます。指定された位置の値を尊重していないようです。(両方とも幅を 40% に設定したので、使用されるすべてのスペースの問題ではありませんでした。)

参考までに: float を使用しないことにしました。IE7 との互換性が必要なので、テーブル表示を使用しないことにしました。私はCSSをあまりやったことがないので、私の質問は簡単に解決できるといいのですが（指を交差させます）

4

4 に答える 4

1

このフィドルがあなたの問題を解決すると思います。div をフロートしなかったというエラー。

ブロック レベルの要素は、絶対配置または固定されている場合を除き、フローティングされていない場合、互いに隣接して配置されることはありません。

top, left & right注:プロパティを使用して要素を配置する場合は、それらのposition: absolute.

于 2013-07-01T00:14:46.233 に答える
1

このようなものをお探しですか？

上のリンクからデモをご覧ください。

   <div class="box1">X</div>
   <div class="box2">X</div>

CSS

   * {
  margin: 0;
  padding: 0;

}


.box1 {
  width: 48%;
  background-color: white;
  border:1px solid black;
 }

.box2 {
  width: 48%;
  background-color: white;
  border:1px solid black;
 }


.box1, .box2 {
  display: inline-block;
  margin: auto;
}


@media screen and (max-width: 300px){
  .box1, .box2 {
    width: 46%;
    float: right;
    display: inline-block;
    margin-right: 1%
}
于 2013-06-30T23:50:03.623 に答える