Question

所有这是我的第一个堆栈溢出帖子，提前感谢任何帮助

我正在整理一个带有内容和div与图像背景的页面，当我尝试将两个div放在右边的一个上面时，左边有流量内容，我已经使用了清楚所以一个div是在右边的另一个上面，但我试图放在左边的内容与第二个图像对齐，其中清除被应用然后第一个div有一个很大的差距，任何建议？

我在这里附上了代码

.img1 {
float: right;
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
padding: 70px 5px 10px 5px;
}

.img2 {
float: right;
background: url("url")no-repeat 100% 100%;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 30px;
background-color: #006534; 
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
padding: 5px 5px 0px 5px;
}

HTML

<div class="img1">content</div>
<p class="clear"></p>
<div class="img2">content</div>
<div>Content.........</div>

Answer 1

试试这个，我相信你的要求：

<强> HTML：

<div style="float: left;">
<div>Content.........</div>
</div>

<div style="float: right;">
<div class="img1">content</div>
<br>
<div class="img2">content</div>
</div>

<强> CSS：

.img1 {
width: 250px;
box-shadow: 7px 7px 5px #cccccc;
border-radius: 10px;
border: 1px solid #f5aca6;
background: url("url") no-repeat 50% 10px;
background-color: #ffecec;
}

.img2 {
background: url("url")no-repeat 100% 100%;
background-color: #006534; 
color: #d2d2d2;
line-height: 20px;
font-size: 13px;
width: 250px;
border: thin silver solid;
box-shadow: 7px 7px 5px #cccccc;
}

JsFiddle：https://jsfiddle.net/nmzwLn2q/1/

在右边浮动两个div，一个在另一个上面

1 个答案: