2

CSS で物事を均等に配置するのは比較的簡単です。それに関連するスタックオーバーフローについても多くの質問がありますが、説明されていないことの1つは、各ボックスの間にスペース（またはmargin-leftとmargin-right）を配置する方法です。

説明するために、これは私が達成したいことです： 達成

これを実現するために、3 つの異なる名前の div を使用することで、長い道のりを歩んでいるように感じます。

CSS:

#moreinfobar
{

}
#moreinfobarbox
{
float:left;
width:33.33%;
}
#moreinfobarbox-info
{
margin:0 20px;
background-color:#ffffff;
-webkit-box-shadow:  0px 0px 5px 1px #000000;
box-shadow:  0px 0px 5px 1px #000000;
}

HTML:

<div id="moreinfobar">

                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test1</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test2</div></div>
                <div id="moreinfobarbox"><div id="moreinfobarbox-info">Test3</div></div>


            </div>

私はそれを2つの別々の名前のdivで動作させようとしましたが、役に立ちませんでした。私のコードを要約することは可能ですか?

JSFIDDLE:

3 つの div (WORKS):

http://jsfiddle.net/JsA25/

2 つの div (BROKEN):

http://jsfiddle.net/TxT4T/1/

4

3 に答える 3

0

親の幅が固定されているときに、子要素にマージン+幅を指定した場合。マージンは要素の外部スペースを作成します-結果：UIが壊れています。

<div style="width:400px;">
  <div style="width:200px; float: left; margin: 0 0 0 20px;">One</div> <!--Total space required: 220px; [disturbed UI]-->
  <div style="width:200px; float: left; margin: 0 0 0 20px;">Two</div> <!--Total space required: 220px; [disturbed UI]-->
</div>

親は-400px ;

子要素は40px〜440pxで侵入しています。結果：壊れたUI

幅を狭くするだけです。あなたの場合はwidth:26.33%;

于 2012-06-04T06:38:21.743 に答える
0

ここで重要なことは、幅の合計が、それを含む要素の合計幅 (3 x 33,33%) + (3 x 20px) よりも大きく、常に 100% よりも大きくなることです!

代わりに、次のようなことができます。

.moreinfobarbox
{
 float:left;
 width:30.33%;
 margin-left:1.5%;
 margin-right:1.5%;
}

この記事には、この問題に関する適切な説明があります: CSS を使用して要素を水平方向に分散する方法

于 2012-06-04T07:04:30.223 に答える
0

私が感じる最良の方法は、マージンを 5% に設定することです。ここに jsfiddle があります: http://jsfiddle.net/dwbed/

于 2012-08-10T07:55:31.940 に答える