如何安裝外箱內的內箱？

所以我試圖編寫一個流體佈局，並試驗浮標。第一步是開發一個簡單的流體佈局，其中有兩個部分填充整個頁面的寬度。藍色框的寬度爲25％，顏色爲＃0076a3。高度爲600像素，綠色框的寬度爲75％，顏色＃7cc576。高度是600像素。然後我想在藍色框內添加4個框，每個框的高度爲150像素。如何安裝外箱內的內箱？

之後，我想將這兩個部分（由左分區和右分區形成）放在另一個寬度爲1200px的中心。我面臨的問題是，只有我可以適當地將內盒（藍色盒子和綠色盒子）放在外盒（灰色盒子）內。

#mainDiv { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    background-color: #c2c2c2; 
 
} 
 
#leftDiv, 
 
#rightDiv { 
 
    height: 600px; 
 
    margin: 0px; 
 
} 
 
#leftDiv { 
 
    width: 25%; 
 
    background-color: #0076a3; 
 
    float: left; 
 
} 
 
#rightDiv { 
 
    width: 75%; 
 
    background-color: #7cc576; 
 
} 
 
#box1, 
 
#box2, 
 
#box3, 
 
#box4 { 
 
    height: 150px; 
 
    clear: both; 
 
} 
 
#box1 { 
 
    background-color: #6dcff6; 
 
} 
 
#box2 { 
 
    background-color: #00bff3; 
 
} 
 
#box3 { 
 
    background-color: #00aeef; 
 
} 
 
#box4 { 
 
    background-color: #0076a3; 
 
}

<div id="mainDiv"> 
 
    <div id="leftDiv"> 
 
    <div id="box1"></div> 
 
    <div id="box2"></div> 
 
    <div id="box3"></div> 
 
    <div id="box4"></div> 
 
    </div> 
 
    <div id="rightDiv"></div> 
 
</div>

這最後的輸出應該是這樣的：

來源

2015-09-25 abedzantout

這個問題需要進一步澄清 - 我不太確定你想達到的目標。你想把藍色的盒子放在綠色的盒子裏面嗎？ – rockmandew

我不確定「內部」和「外部」框是什麼。請提供更多信息 – cocoa

@rockmandew不，我想把藍色框和綠色框放在灰色框內 – abedzantout

好了，我懂了工作，但出於某種原因，我似乎無法尋找到額外的空格來自藍色或綠色框，但它們之間有一點空間 - 這是雖然你會看到我調整了藍色框的寬度爲24.66％，這使得它們成爲在同一行 - 我也拿走了浮動和清除 - 你想使用「內聯塊」爲此。

這裏是一個搗鼓你一起玩：https://jsfiddle.net/rockmandew/Lkkuzmh9/

#leftDiv { 
    width: 24.66%; 
    background-color: #0076a3; 
    display:inline-block; 
} 
#rightDiv { 
    width: 75%; 
    background-color: #7cc576; 
    display:inline-block; 
}

讓我知道如果您有任何問題。

來源

2015-09-25 19:00:50 rockmandew

謝謝你試圖回答我的問題，但這不是' t我的期望輸出和我的錯我沒有進一步澄清。我附上了主要問題的最終結果。 – abedzantout

float: left應該適用於#leftDiv和#rightDiv。

編輯：我修改了我的答案，其中包括一個div#container將浮動元素放置在灰色方框父項中。

#mainDiv { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    background-color: #c2c2c2; 
 
} 
 
#container { 
 
    width: 100%; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
#container:after { 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
    visibility: hidden; 
 
} 
 
#leftDiv, 
 
#rightDiv { 
 
    height: 600px; 
 
    margin: 0px; 
 
    float: left; /* float moved here */ 
 
} 
 
#leftDiv { 
 
    width: 25%; 
 
    background-color: #0076a3; 
 
} 
 
#rightDiv { 
 
    width: 75%; 
 
    background-color: #7cc576; 
 
} 
 
#box1, 
 
#box2, 
 
#box3, 
 
#box4 { 
 
    height: 150px; 
 
    clear: both; 
 
} 
 
#box1 { 
 
    background-color: #6dcff6; 
 
} 
 
#box2 { 
 
    background-color: #00bff3; 
 
} 
 
#box3 { 
 
    background-color: #00aeef; 
 
} 
 
#box4 { 
 
    background-color: #0076a3; 
 
}

<div id="mainDiv"> 
 
    <div id="container"> 
 
    <div id="leftDiv"> 
 
     <div id="box1"></div> 
 
     <div id="box2"></div> 
 
     <div id="box3"></div> 
 
     <div id="box4"></div> 
 
    </div> 
 
    <div id="rightDiv"></div> 
 
    </div> 
 
</div>

來源

2015-09-25 19:01:51 JRulle

哈哈哈很好的回答，我甚至都沒有意識到他沒有將float應用到其他元素上。<----很好的捕獲 – rockmandew

除非你在第二個div上設置溢出http://codepen.io/anon/筆/ pjNJJr –

我沒有足夠澄清我的問題，我已經編輯了所需的輸出。任何不便敬請諒解。 – abedzantout

如果你只需要添加padding到#mainDiv？就像這樣：

#mainDiv { 
 
    height: 600px; 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    padding: 0 200px 200px 200px; 
 
    background-color: #c2c2c2; 
 
} 
 
#leftDiv, 
 
#rightDiv { 
 
    height: 600px; 
 
    margin: 0px; 
 
} 
 
#leftDiv { 
 
    width: 25%; 
 
    background-color: #0076a3; 
 
    float: left; 
 
} 
 
#rightDiv { 
 
    width: 75%; 
 
    background-color: #7cc576; 
 
    float: left; 
 
} 
 
#box1, 
 
#box2, 
 
#box3, 
 
#box4 { 
 
    height: 150px; 
 
} 
 
#box1 { 
 
    background-color: #6dcff6; 
 
} 
 
#box2 { 
 
    background-color: #00bff3; 
 
} 
 
#box3 { 
 
    background-color: #00aeef; 
 
} 
 
#box4 { 
 
    background-color: #0076a3; 
 
}

<div id="mainDiv"> 
 
    <div id="leftDiv"> 
 
    <div id="box1"></div> 
 
    <div id="box2"></div> 
 
    <div id="box3"></div> 
 
    <div id="box4"></div> 
 
    </div> 
 
    <div id="rightDiv"></div> 
 
</div>

來源

2015-09-25 19:09:05 cocoa

，不幸的是，它不能完全適合所有角度的灰色框，因爲值提供的填充是固定的。 – abedzantout

你是什麼意思所有角度？像什麼時候調整大小？ – cocoa

藍色和綠色框在灰色框中未正確居中。請檢查我的問題並查看所需的輸出。我希望左右邊距的寬度完全相同 – abedzantout

試試下面的代碼。

#mainDiv { 
 
     height:700px; 
 
     margin: 0 auto; 
 
     } 
 
     #container{ 
 
     height:90%; 
 
     background-color: #c2c2c2; 
 
     padding: 0 100px; 
 
     } 
 
     #leftDiv, 
 
     #rightDiv { 
 
     height: 500px; 
 
     margin: 0px; 
 
     float: left; 
 
     } 
 
     #leftDiv { 
 
     width: 25%; 
 
     background-color: #0076a3; 
 
     } 
 
     #rightDiv { 
 
     width: 75%; 
 
     background-color: #7cc576; 
 
     } 
 
     #box1, 
 
     #box2, 
 
     #box3, 
 
     #box4 { 
 
     height: 125px; 
 
     clear: both; 
 
     } 
 
     #box1 { 
 
     background-color: #6dcff6; 
 
     } 
 
     #box2 { 
 
     background-color: #00bff3; 
 
     } 
 
     #box3 { 
 
     background-color: #00aeef; 
 
     } 
 
     #box4 { 
 
     background-color: #0076a3; 
 
     }

<html lang="en"> 
 
    <head> 
 
    <title>Page Title</title> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatibile" content="IE-edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta name="description" content="netguru recruitment task"> 
 
    </head> 
 
    <body> 
 
    <div id="mainDiv"> 
 
     <div id="container"> 
 
     <div id="leftDiv"> 
 
      <div id="box1"></div> 
 
      <div id="box2"></div> 
 
      <div id="box3"></div> 
 
      <div id="box4"></div> 
 
     </div> 
 
     <div id="rightDiv"></div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

來源

2015-09-25 19:43:25 Ananthaprakash

如何安裝外箱內的內箱？

回答

相關問題