css盒子被挤下——想让被挤下来的盒子补到左边的空白处（如图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D数据显示页面</title>
<style>
a {
position: relative;
display: block;
height: 40px;
width: 200px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
padding-left: 30px;
line-height: 40px;
}
.left {
float: left;
width: 234px;
height: 60px;
background-color: rgb(129, 113, 129);
}
.right {
float: right;
width: 992px;
height: 615px;
background-color: beige;
}
.right>div {
float: left;
width: 230px;
height: 300px;
background-color: rgb(110, 106, 106);
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="left">左边的小框是放以下楼层的数据</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>
<div class="left">
<a href="#">第一栋独居老人相关数据</a>
<a href="#">第二栋独居老人相关数据</a>
<a href="#">第三栋独居老人相关数据</a>
<a href="#">第四栋独居老人相关数据</a>
<a href="#">第五栋独居老人相关数据</a>
<a href="#">第六栋独居老人相关数据</a>
<a href="#">第七栋独居老人相关数据</a>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
运行之后效果如下：
想让红色圈圈内（即掉下来的盒子）移动到蓝色圈圈的位置上，代码附上了，但是不知道怎么改，可能是padding或者是margin的问题。求大神指点！！ O(∩_∩)O谢谢
html 结构写的有问题吧
你把右边的left类写到左边left类里面去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D数据显示页面</title>
<style>
a {
position: relative;
display: block;
height: 40px;
width: 200px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
padding-left: 30px;
line-height: 40px;
}
.left {
float: left;
width: 234px;
height: 60px;
background-color: rgb(129, 113, 129);
}
.left h5 {
text-align: center;
}
.right {
float: right;
width: 992px;
height: 615px;
background-color: beige;
}
.right>div {
float: left;
width: 230px;
height: 300px;
background-color: rgb(110, 106, 106);
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="left"><h5>左边的小框是放以下楼层的数据</h5>
<div class="left-a">
<a href="#">第一栋独居老人相关数据</a>
<a href="#">第二栋独居老人相关数据</a>
<a href="#">第三栋独居老人相关数据</a>
<a href="#">第四栋独居老人相关数据</a>
<a href="#">第五栋独居老人相关数据</a>
<a href="#">第六栋独居老人相关数据</a>
<a href="#">第七栋独居老人相关数据</a>
</div>
</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>