Question

我有几个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

下

Answer 1

我建议使用flex更容易：

首先将布局分为2列（第一列为div1,div2,div3，第二列为div4）。然后在第一列中，您只需将第一个div设为width:100%，然后使用换行使剩余的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>

Answer 2

这是CSS网格的另一种替代方案。希望，它有所帮助：）

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

安排几个div

2 个答案: