安排几个div答案

【问题标题】：Arrange a few divs安排几个div
【发布时间】：2017-12-31 21:53:05
【问题描述】：

我有几个 div 需要安排，但我卡住了。它应该是这样的

我已经为此工作了几个小时，但情况不会好转。这是我到目前为止写的代码。我认为专业人士有一个简单的解决方案。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

 
#wrapper {
width: 600px;
margin: 0 auto;
}
 
#content_3 {
float: left;
background: #bbb;
width: 200px;
}
 
#content_2 {
float: left;
width: 200px;
background: #aaa;
}
 
 
#content_4 {
float: right;
width: 200px;
background: #ddd;
}
 
#content_1 {
float:left;
width: 400px;
margin: 0 auto;
background: #eee;
}

</style>
 
</head>
<body>
 
<div id="wrapper">
<div>
	 <div id="content_1">content_1</div>
     <div id="content_2">content_2</div>
     <div id="content_3">content_3</div>
</div>

     <div id="content_4">content_4</div>
</div>
 
</body>
</html>

有人可以帮忙吗？

Wrapper

两种解决方案都对我有用，但 DIV 2 的内容正在增加，因此内容 3 和 4 正在下降。我怎样才能解决这个问题？ Conten_3 和 4 应位于 content_1 下方

【问题讨论】：

您的文档类型是自 1999 年以来不应用于新网页的文档类型。将其更新为当前所需的文档类型：<!DOCTYPE html>
Masonry layout with css3 flex Search on SO 或 Google 的“砌体布局”可能重复，并找到许多相同的答案。

标签： html css

【解决方案1】：

我建议使用flex，更容易：

您首先将布局分为两列（第一列为div1,div2,div3，第二列为div4）。然后在第一列中，您只需将第一个 div 设置为 width:100% 并使用 wrap 使剩余的 2 个转到下一行。

body {
  margin: 0;
}

#wrapper {
  width: 600px;
  display: flex;
  height: 200px;
  margin: 0 auto;
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: #bbb;
  width: 100%;
}

#content_2 {
  flex: 1;
  background: #aaa;
}

#content_4 {
  flex: 1;
  background: #ddd;
}

#content_3 {
  flex: 1;
  background: #eee;
}

<div id="wrapper">
  <div class="first">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="content_4">content_4</div>
</div>

【讨论】：

@Teratek 我为答案添加了更多解释；）我强烈建议您阅读有关 flexbox 布局的更多信息，您的生活会更轻松 :) 当然，这不是您获得更多信息的唯一方法使用浮点数、内联块、网格等回答;)

【解决方案2】：

这是 CSS 网格的另一种选择。希望，它有帮助:)

我们将包装器分为 3 列，每列分数为 1。然后对于每个内容，我们只提及行和列，如果我们需要组合到行或列，我们使用 span，如图所示。

优点：不用担心高度和宽度，可以利用分数来划分。

#wrapper {
  width: 600px;
  height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#wrapper * {
  text-align: center;
}

#content_1 {
  grid-column: 1 / span 2;
  background: red;
}

#content_2 {
  background: #aaa;
  grid-column: 3;
  grid-row: 1 / span 2;
}

#content_3 {
  background: #bbb;
  grid-column: 1;
  grid-row: 2;
}

#content_4 {
  grid-column: 2;
  grid-row: 2;
  background: #ddd;
}

<div id="wrapper">
  <div id="content_1">content_1</div>
  <div id="content_2">content_2</div>
  <div id="content_3">content_3</div>
  <div id="content_4">content_4</div>
</div>

【讨论】：