用不起作用的flex替换不起作用的float

问题描述

我将照片作为背景图像放置在右边。我也有一些清单，我希望将其放在左边。但它卡在照片上。我使用了float，但没有任何反应。我尝试了flex但也没有任何反应。

its how the page is looking now

.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>

解决方法

这是您要找的吗？

.section__img1 {
  background: url("https://i.stack.imgur.com/B2W26.png") center no-repeat;
  background-size: cover;
  width: 985px;
  height: 580px;
  float:right;
}

CodePen

,

您可以将flex用于容器，并删除图像上的绝对位置，然后图像div会自动增长到与内容列相同的高度：

.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会更容易：

.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>

,

首先，您需要将其父容器设置为弹性显示，即

.container { display: flex; }

然后是图像部分：

.section__img1 { flex-basis: 50%; max-width: 50%; }

然后，内容部分：

.section__content { flex-basis: 50%; max-width: 50%; }

这为您提供了一个基本设置，以实现您的目标。

删除绝对位置，浮动并根据需要在.section_img1高度上工作。

,

我只需要写flex-direction: row-reverse;并将列表移到空白处，一切都很好