盒子搞砸了

我目前正在爲一個大學任務做一個網站，我真的很困惑爲什麼我想創建的div沒有出現。盒子搞砸了

它似乎不起作用，因爲我爲三個框添加了代碼，它們的寬度與三個框相同。

<div id="wrapper"> 
    <div id="top"> 
     <div class="logo"> </div> 
    </div> 
    <div id="menu"> 
     <div class="button"> Home </div> 
     <div class="button"> Destinations </div> 
     <div class="button"> Make A Booking </div> 
     <div class="button"> Things To Do </div> 
     <div class="button"> Contact Us </div> 
    </div> 
    <div id="box"> 
    content here 
    </div> 
    <div id="threeBoxContainer"> 
     <div id="deal_one"></div> 
     <div id="deal_two"></div> 
     <div id="deal_three"></div> 
    </div> 
</div>

來源

2014-02-19 IamM4G1C

您能否澄清一下您究竟想達到什麼目的？ –

由於其語法結構，很難理解你的問題。但是，如果你想要做的是將三個盒子合併成一行，而不是讓第三個盒子下降，那麼你的寬度太多了。您可以將33％的箱子降到32％，並看到他們將填補空間。 – JackArbiter

基本上我想讓一個div在三個盒子下面，但我也希望盒子的寬度與他們所有的togeather相同。但是我在編碼盒子時遇到了麻煩，但是當我這樣做的時候，似乎只留下黑線和頁面的底部？ – IamM4G1C

你只需要添加box-sizing財產

#deal_one { 
    /*Other Style */ 
    box-sizing:border-box; 
} 

#deal_one { 
    /*Other Style */ 
    box-sizing:border-box; 
} 
#deal_three { 
    /*Other Style */ 
    box-sizing:border-box; 
}

Reference

Fiddle Demo

來源

2014-02-19 16:10:20

@downvoter我錯過了什麼嗎？ –

您的border-width在每個箱計數到WID日。看箱子型號：http://www.w3schools.com/css/css_boxmodel.asp

來源

2014-02-19 16:11:32 Marcel

它的因爲css寬度只代表內容寬度。總寬度是填充，邊距和邊框的組合。

Total Width=ContentWidth+Padding+Border+Margin

因此，給33％的寬度和一些邊距，填充和邊框使它實際上大於33％。減小寬度尺寸以實現期望的結果。大約30或31％將會很好。

來源

2014-02-19 16:12:55

鑑於你在評論中說，一個可能的答案：

HTML底部：

<div id="threeBoxContainer"> 
    <div id="deal_one"></div> 
    <div id="deal_two"></div> 
    <div id="deal_three"></div> 
</div> 
<div id="bigbox"></div>

CSS：

#bigbox { 
width: 98%; 
height: 300px; 
background-color:rgba(0, 95, 160, 1); 
border: solid 2px black; 
margin-top: 5%; 
}

這似乎爲我工作。如果我離開高度，我只能像你提到的那樣得到一條堅實的線。

來源

2014-02-19 16:19:03 JackArbiter

是的，它似乎工作謝謝，所以我能做些什麼，以這三個盒子，使他們填補了微小的空間。 – IamM4G1C

如果有效，請接受答案。至於這三個盒子，它們受邊框寬度的影響，如果使用百分比，則會根據可用空間給出像素寬度。如果你需要保持百分比，你可以使用32.5％或者按照這些線來玩 - 看看有什麼作用。如果你確實需要它並且不關心保持它的百分比，給每一個像素寬度與它應該填充的寬度相對應。在chrome中使用f12來使用dev控制檯查看您給出的百分比的像素寬度。 – JackArbiter

回答

相關問題