如何安装外箱内的内箱？

所以我试图编写一个流体布局，并试验浮标。第一步是开发一个简单的流体布局，其中有两个部分填充整个页面的宽度。蓝色框的宽度为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

如何安装外箱内的内箱？

回答

相关问题