Question

我越来越意识到我对css定位没有很好的理解。看到这经常给我带来麻烦，我一直试图为练习创造不同的布局。我试图创建一个可以容纳6个不同div的网站，显示6个不同的数据点。两个大的div和顶部各占据屏幕的50％，每个屏幕下方有4个较小的div，占据屏幕的25％。

我做了一些研究，发现左边的浮动会给我上半部分的结果，但我似乎无法弄清楚如何定位底部的四个div，以便它们保持用上面的div冲洗并支持。每当我调整屏幕大小时，我到目前为止尝试的所有内容都会失败。有人能指出我正确的方向吗？

这是我到目前为止的照片。上半部分是正确的，下半部分是我坚持的

enter image description here

这是我的HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>flatpage</title>


  <link rel="stylesheet" href="css.css">

  <div id ="main">

  <div class = "navbar">
  </div>

  <div class =  "total_number_container">
  </div>

  <div class = "searched_number_container">
  </div>

  <div class = "attribute_one>"
  </div>

  <div class = "attribute_two>"
  </div>

  <div class = "attribute_three>"
  </div>

  <div class = "attribute_four>"
  </div>
  </div>

</head>

<body>
  <script src="js/scripts.js"></script>
</body>
</html>

这是我的css

body {
background-color:#ecf0f1;
margin:0;
}

.navbar{
background-color:#2c3e50;
width: 100%;
height: 50px;
margin:0;
padding:0;
}

.total_number_container {
background-color:#3498db;
float: left;
width: 50%;
height: 300px;
}

.searched_number_container {
float:left;
background-color:#2980b9;
width: 50%;
height: 300px;
}

.attribute_one {
background-color:#5C97BF;
width: 25%;
height: 300px;
}

.attribute_two {
background-color:#34495e;
width: 25%;
height: 300px;
}

.attribute_three {
background-color:#5C97BF;
width: 25%;
height: 300px;
}

.attribute_four {
background-color:##34495e;
width: 25%;
height: 300px;
}

Answer 1

你的意思是，如下所示？

这可以使用浮点数和％大小来实现。

Demo Fiddle

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div:nth-child(1), div:nth-child(2) {
    width:50%;
}
div {
    box-sizing:border-box;
    float:left;
    border:1px solid black;
    width:25%;
    height:50%;
}

Answer 2

这个小提琴纠正了原始HTML和CSS代码中的语法错误，并使用原始类（.attribute_one, .attribute_two, .attribute_three, .attribute_four）来实现所需的结果。

http://jsfiddle.net/2G8C7/

缺少的关键事项是：

.attribute_one, .attribute_two, .attribute_three, .attribute_four {
    float: left;
}

以下HTML语法错误：

<div class = "attribute_one>" <!-- notice the closing quote is in the wrong place -->
</div>

应该是

<div class = "attribute_one">
</div>

CSS中也有拼写错误，background-color的{{1}}有两个＃（.attribute_four）

Answer 3

    <div class = "attribute_one>"
      </div>

      <div class = "attribute_two>"
      </div>
<div class = "attribute_three>"
  </div>

  <div class = "attribute_four>"
  </div>

以上是HTML的一部分，但是错误。你想要的是

    <div class = "attribute_one">
      </div>

      <div class = "attribute_two">
      </div>
<div class = "attribute_three">
  </div>

  <div class = "attribute_four">
  </div>

之后只需使用float：left为所有四个div设置宽度为25％。之后是另一个div的最佳实践

<div style="clear:both"></div>

浮底？将div定位在其他div的底部

3 个答案:

Demo Fiddle