我有照片作为背景图像，它放置的权利。我也有一些清单，我想把它放在左边。但它粘在照片上了。我用了float，但什么都没发生。我试过flex，但也没什么结果。
这就是页面现在的样子
null
.section__img1 {
position: absolute;
background: url("../images/section1.png") center no-repeat;
background-size: cover;
width: 985px;
height: 580px;
top: 50%;
transform: translateY(-50%);
right: 50%;
margin-right: 0px;
}
.section__content {
float: right;
width: 40%;
}
.section__content.left {
float: left;
}<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>null
这就是你要找的吗？
.section__img1 {
background: url("https://i.stack.imgur.com/B2W26.png") center no-repeat;
background-size: cover;
width: 985px;
height: 580px;
float:right;
}
代码en
您可以为您的容器使用flex，并移除您图像上的绝对定位，那么图像div将自动增长到与您的内容列相同的高度:
null
.container {
display: flex;
flex-direction: row-reverse;
}
.section__img1 {
flex-grow: 1;
background: url("https://www.fillmurray.com/300/200") center no-repeat;
background-size: cover;
}
.section__content {
width: 40%;
}<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
</div>
flex会让它变得更简单:
null
.container {display:flex;}
.section__img1 {
background: url(https://picsum.photos/id/1001/2000/800) center no-repeat;
background-size: cover;
}
.section__content ,
.section__img1{
flex:1
}
/* switch/reorder position ? */
.container + .container .section__img1 {
order:1;
}<div id="our-services" class="section bg-blue">
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
<div class="container">
<div class="section__img1"></div>
<div class="section__content">
<div class="title-block left"><span class="ico-arrow-down"></span> Входящие звонки</div>
<ul class="section__list">
<li>Горячая линия</li>
<li>Виртуальный офис</li>
<li>Прием заказов</li>
<li>Консультации по телефону</li>
<li>Заполнение анкет</li>
</ul>
</div>
</div>
</div>