<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box
{
width: 1000px;
border: solid thin black
}
#box:after
{
content: '';
display: block;
clear: both;
}
.common
{
width: 500px;
float: left;
font-size: 40px;
}
#div1
{
height: 400px;
background-color:gray;
}
#div2
{
height: 600px;
background-color:red;
}
#div3
{
height: 300px;
background-color:black;
color:white;
}
</style>
</head>
<body>
<div id="box">
<div id="div1" class="common">div1</div>
<div id="div2" class="common">div2</div>
<div id="div3" class="common">div3</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
得到如下效果
---------------------------------------------------------------------------------------------------------------
其实我是希望这样
然后请问不使用js(原因是实际中的页面较复杂。是多行多列,计算起来相当复杂)如何解决。
不要告诉我div3设置margin-top:-200px或者translate(0,-200px)。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box
{
width: 1000px;
border: solid thin black
}
#box:after
{
content: '';
display: block;
clear: both;
}
.common
{
width: 500px;
float: left;
font-size: 40px;
}
#div1
{
height: 400px;
background-color:gray;
}
#div2
{
height: 600px;
background-color:red;
}
#div3
{
height: 300px;
background-color:black;
color:white;
}
</style>
</head>
<body>
<div id="box">
<div id="div1" class="common">div1</div>
<div id="div2" class="common">div2</div>
<div id="div3" class="common">div3</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
得到如下效果
---------------------------------------------------------------------------------------------------------------
其实我是希望这样
然后请问不使用js(原因是实际中的页面较复杂。是多行多列,计算起来相当复杂)如何解决。
不要告诉我div3设置margin-top:-200px或者translate(0,-200px)。