1

私はあなたがここで見ることができるお問い合わせフォームでウェブページをデザインしています。

ご覧のとおり、ページは可変幅になるように設計されています。画像、フォーム、コンテンツ領域の端の間に等間隔、つまり等幅の4つのスペースが必要です。

現時点では、画像が幅20％のDIVの中央に配置され、コンタクトフォームが幅60％のDIVの中央に配置されるように設計しました。これは問題なく機能しますが、ブラウザの幅が大きくなるにつれて、連絡先フォームと画像の間の間隔が画像とコンテンツ領域の端の間の間隔よりも大きくなるため、あまり良くありません。すべてのスペースを同じ幅に保つ方法を見つけたいと思います。

関連するCSSは次のとおりです。

#box {
    width: 100%;
    min-width: 800px;
}

#left {
    float: left;
    width: 20%;

}

#center {
    float: left;
    height: 100%;
    width: 60%;
}

#right {
    height: 100%;
    margin-left: 80%;
}

.dharma {
    width: 185px;
    margin: 0px auto 0;
    padding-top: 25px;
}

#contact-form {
    width: 471px;
    margin: 25px auto;
}

関連するHTMLは次のとおりです。

<div id="box">

<div id="left">
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div>

<div id="center">
<div id="contact-form">
[form HTML]
</div>
</div>

<div id="right">
<div class="dharma"><img src="images/dharma.jpg"></div>
</div>

</div>

誰かがこれを手伝ってもらえますか？

ありがとう、

ニック

4

2 に答える 2

2

あなたが説明している問題は、Chrome、Safari、Firefoxで機能するCSS3フレキシブルボックスレイアウトに最適です。あなたに必要なのは：

#box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#left, #center, #right {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    box-flex: 1.0;
}

残念ながら、これはIEでは機能しませんが、それでも役立つことを願っています。

于 2011-07-11T23:48:32.847 に答える
1

Would simply setting a rule to have all of the boxes have an added margin on them not work?

Something like this:

#box {
    width: 100%;
    min-width: 800px;
}

#left, #center, #right { /* adds spacing between columns of equal size */
    margin: 0 2%;
}

#left {
    float: left;
    width: 16%;  /* reduced by 4% for margins */

}

#center {
    float: left;
    height: 100%;
    width: 56%; */ reduced by 4% for margins */
}

#right {
    height: 100%;
    margin-left: 80%;
}
于 2011-07-11T23:01:32.400 に答える