Поместите два блока справа, один поверх другого

Все это мой первый пост о переполнении стека, заранее спасибо за любую помощь

Я собираю страницу с контентом и div с фоном изображения, когда я пытаюсь разместить два div справа один поверх друг друга, имея проблемы с потоком содержимого слева, я использовал clear, чтобы один 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>

html css
person nsic    schedule 17.02.2016    source источник
comment
Пожалуйста, опубликуйте код, который вы пробовали в своем вопросе.   -  person j08691    schedule 18.02.2016
comment
как сказал @ j08691, опубликуйте, пожалуйста, код, который вы пробовали. Clear сделает так, что все в разметке ниже clear будет отображаться под всеми очищенными плавающими объектами.   -  person thedarklord47    schedule 18.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте, я думаю, это то, о чем вы просили:

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/

person NOYOU454    schedule 17.02.2016
comment
спасибо за ответ, я изменил, однако контент теперь находится под обоими img div, и я изменил порядок, контент находится над обоими img div, какие-либо мысли? - person nsic; 18.02.2016
comment
судя по описанному вами симптому, вы, скорее всего, забыли добавить float: left к содержимому (или, лучше сказать, к контейнеру содержимого). - person Rogier Spieker; 18.02.2016
comment
Привет, спасибо за это, я добавил поплавок слева, содержимое находится на странице, где div img находятся либо сверху справа, либо снизу справа, в зависимости от порядка кода - person nsic; 18.02.2016
comment
все, я установил ширину для контента, чтобы img мог двигаться вверх, но контент не обертывает imge внизу, какие-нибудь идеи? - person nsic; 18.02.2016
comment
Кажется, что оставленный плавающий элемент на самом деле не работает для части содержимого, у меня есть настройка ширины для него, поэтому она появляется, тогда есть место под img div, если содержимое идет слишком долго. - person nsic; 18.02.2016