4

たとえば、幅が 65% の div があり、その div 内に、同じ行に同じサイズの div をさらに 3 つ作成する必要がありますが、サイズは % で、サイド div と中央 div の間に 10 ピクセルのギャップが必要です。助言がありますか？

これまでのところ、次のコードがあります。

    <div style="width: 65%; margin: 0 auto; text-align:left; margin-bottom: 10px;">
<div style="float:left; margin-right: 10px;">1</div>
<div style="float:left; margin-right: 10px;">2</div>
<div style="float:left;">3</div>
</div>
4

6 に答える 6

8

これはもう少し HTML ですが、私にとっては非常にうまく機能しています。

HTML

<div id="hold">
    <div class="innerHold"><div class="inner col1">
        Column won
    </div></div>
    <div class="innerHold"><div class="inner col2">
        Col Two
    </div></div>
    <div class="innerHold"><div class="inner col3">
        Col 3
    </div></div>
    <div class="clear"></div>
</div>

CSS

#hold{
    width: 65%;
    margin: 0px auto;
}
.innerHold{
    float: left;
    width:33.33333%;
    /* make sure left/right margins or left/right padding are 0px here
            - it'll mess with the width otherwise*/
    margin-left:0px;
    margin-right:0px;
    padding-left:0px;
    padding-right:0px;
}
.inner{
    /* Here set your columns padding, borders, and margin 
            - or in the class names as I do below */
    margin:0px;
}
.col1, .col2{
    margin-right:10px;
}
.clear{
    clear:both;
}

http://jsfiddle.net/daCrosby/NR2kX/1/

于 2013-03-14T00:17:50.073 に答える
1

これは私が考えることができる最も近い解決策です：jsfiddle

HTML：

<div id="container">
  <div class="small">lorem ipsum dolor sit amet</div>
  <div class="small">lorem ipsum dolor sit amet</div>
  <div class="small">lorem ipsum dolor sit amet</div>
</div>

CSS：

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#container {
  margin: 0 auto;
  width: 65%;
  height: 300px;
}

.small {
  float: left;
  width: 33.3%;
  padding-right: 10px;
  height: 100%;
}

.small:last-child {
  padding: 0;
}

利用した

box-sizing: border-box

パーセンテージで宣言された幅のパディングを含める。また、セレクターを使用:last-childして、最後の要素からパディングを削除しました。のブラウザサポートを確認してくださいbox-sizing

于 2013-03-14T00:09:21.330 に答える
1

これは、引用された 33% の幅にはすべてのパディングなどが含まれ、ボーダーボックスがこれを考慮しているため、幅を変更する必要がないことを意味します....ここにいくつかのブラウザー互換性オプションもあります!

   box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */

ボックスのサイズについては、こちらのリンクが便利です。

于 2013-03-14T00:14:34.040 に答える
0

このようにこれを行います：

    <div style="width: 65%; margin: 0 auto; text-align:left; margin-bottom: 10px;">
<div style="float:left; width: 30%; background-color: #FFFFFF;">1</div>
<div style="float:left; width: 5%;">.</div>
<div style="float:left; width: 30%; background-color: #FFFFFF;">2</div>
<div style="float:left; width: 5%;">.</div>
<div style="float:left; width: 30%; background-color: #FFFFFF;">3</div>
</div>
于 2013-03-14T00:11:49.943 に答える
0

私が正しく読んでいれば、3 つの div を親 div の 33% にする必要があります。33.3% x 3 = 100% (十分に近い) ですが、パディングが必要な場合は、div のパーセンテージを減らす必要があります。たとえば、3 つの div を 30% (30% x 3 = 90%) にすると、10% の余裕を持たせることができるため、各 div に 3.33% のパディングを割り当てることができます。

于 2013-03-14T00:03:05.000 に答える
-1

これは完璧ではありませんが、おそらくこのヘルプを試してください

html

 <div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box noMarginRight">3</div>
</div>

CSS

 .wrapper {
    float:left;
    width:65%;
    background-color:#555;
}
.box {
    float:left;
    width:31.4%;
    background-color:#000;
    margin:0 10px 0 0;
}
.noMarginRight {margin-right:0 !important}

動作デモ

于 2013-03-14T00:25:41.380 に答える