-2

私は垂直に3つのdivを持っています。最初の div は幅 100%、2 番目は幅 283px の画像、3 番目の div は幅 100% にする必要があります。画像 div を他の 2 つの div の真ん中に 100% 配置する方法を知っている人はいますか?

私はこれを試しましたが、うまくいきません

<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>

.first{
  width:100%;
  float:left;
  background:yellow;
}
.third{
   width:100%
   float:right;
   background:pink;
}
.second{
   width:283px;
   overflow:hidden;
   background:blue;
}​enter code here
4

3 に答える 3

2

div を横に並べて配置することを意図している場合は、横にあるすべての要素の合計が 100% にしかならないため、それらのいずれかを 100% の幅に設定することはできません。

ウェブサイトが固定幅である場合、最も簡単な解決策は、左右の div の幅をピクセル単位で (サイトの幅 - 283) / 2 に設定することです。% でこれを行うこともできます。

ただし、サイトが流動的な幅の場合、3 つの div すべてのパーセンテージ、つまりそれぞれ 33% を計算する必要がありますが、これは中央が正確に 283 ピクセルにならないことを意味します。

これを希望どおりに機能させるために私が考えることができる唯一の方法は、ページの読み込み後にJavascriptを使用して要素のサイズを変更し、ブラウザの寸法を取得してすべてを解決することです.

于 2012-12-07T16:04:48.400 に答える
0

何度か読んで、あなたのやりたいことが理解できたと思います。

中央の div を他の 2 つの div の中央に配置します。

div に次のようなクラスを与える必要があります。

 .middlediv
 {
    width: 283px;
    margin-left: auto;
    margin-right: auto;
 }

次のように書くこともできます。

 .middlediv
 {
    width: 283px;
    margin: 0px auto;
 }
于 2012-12-07T15:57:23.727 に答える
0

あなたの質問は明確ではないので、考えられる両方の解釈を行いました: http://jsfiddle.net/EbBzY/

HTML

<h1>Option 1</h1>
<div class="main">
    <div class="content">
        <div class="first">1</div>
        <div class="second">2</div>
        <div class="third">3</div>
    </div>
</div>

<h1>Option 2</h1>
<div class="content">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
</div>

CSS

.main{
    display:table;
    width:100%;
    margin-bottom:100px;
}
.main .content{
    display:table-row;
}
.main .content div{
    display:table-cell;
}

.first{
    background:yellow;
}
.third{
    background:pink;
}
.second{
    background:blue;
    width:283px;
    margin:auto;
}
于 2012-12-07T16:43:57.303 に答える