3個百分比的寬度

可以說，我有寬度爲65％的div，在該div的內部我需要創建3個多個div，它們在同一行中，大小相同，但大小應該在％，並且應該有10px邊界和中心區之間的差距。有什麼建議麼？3個百分比的寬度

到目前爲止，我有以下代碼：

<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>

來源

2013-03-13 Tautvydas

這是一個比較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-14 00:17:50 DACrosby

如果我讀正確，你想要的3個div的是其母公司股利的33％。 33.3％x 3 = 100％（足夠接近），但是如果你想填充你必須減少divs的百分比。例如擁有30％（30％x 3 = 90％）的3格可以讓你擁有10％的le-way，所以你可以讓每個div有3.33％的填充，但是你想分配它:)

來源

2013-03-14 00:03:05

這是我能想到的最接近的解決方案：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-14 00:09:21

以這樣的方式完成這個瀏覽器支持：

<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-14 00:11:49 Tautvydas

將與用於間隔件固定寬度（的10px的）這項工作？ – DACrosby 2013-03-14 00:26:14

這對我來說並不重要。仍然在這個解決方案中，我有一個間隔div的問題，他們需要一個符號裏面顯示... – Tautvydas 2013-03-14 00:37:22

嘗試使用不可破壞的空間。與普通空間相同，但不會摺疊。 ' ' – DACrosby 2013-03-14 02:09:21

這將意味着你的報價的33％的寬度將包括所有填充等，並沒有必要改變寬度邊界框帳戶這....這裏有一些瀏覽器兼容性選項以及！

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

Here is a helpful link on box sizing!

來源

2013-03-14 00:14:34

-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}

工作Demo

來源

2013-03-14 00:25:41 jhunlio

3個百分比的寬度

回答

相關問題