Question

所以我试图编写一个流畅的布局，并尝试使用float标签。第一步是开发一个简单的流体布局，它有两个分区，可以在整个页面中填充宽度。蓝色框的宽度为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>

此最终输出应如下所示：

Answer 1

好的，所以我得到了它的工作，但由于某种原因，我似乎无法找到蓝色或绿色盒子上的额外空白，但它们之间有一点空间 - 这是你会看到的我将蓝色框的宽度调整为24.66％，这使得它们可以在同一条线上 - 我还带走了浮动并清除 - 你想要使用“内联块”。

这是一个让你玩的小提琴：https://jsfiddle.net/rockmandew/Lkkuzmh9/

    selectAll: function(){
        if(!this.selectMode){
            this.selectMode = true;
        }

        for(var i = 0; i < this.list.length; i++){
            this.list[i].$set("selected", true);
            this.selectedList.push(this.list[i]); // This line
        }
    }

如果您有任何问题，请与我们联系。

Answer 2

float: left应同时应用于#leftDiv和#rightDiv。

编辑：我修改了我的答案，包括div#container来将浮动元素放在灰色框父项中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您只是将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>

Answer 4

尝试以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

如何将内盒安装在外盒内？

4 个答案: