我有几个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>
有人可以帮忙吗?
两种解决方案对我都很好,但DIV 2的内容正在增加,因此内容3和4正在向下移动。我怎样才能解决这个问题? Conten_3和4应该保持在content_1下面
我建议使用flex,更容易:
首先将布局分为2列(第一列为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>
这是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>