用同样不起作用的 flex 替换不起作用的 float答案

【问题标题】：Replacing float that doesn't work with flex that doesn't work too用同样不起作用的 flex 替换不起作用的 float
【发布时间】：2020-12-15 06:31:27
【问题描述】：

我有照片作为背景图片，它放置正确。我也有一些清单，我希望它放在左边。但它卡在照片上。我使用浮动，但没有任何反应。我尝试了 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>

【问题讨论】：

这是因为您对图像进行了绝对定位，并且看起来它占据了 985px 的宽度，因此它很可能是屏幕的大部分而不是右侧
有一点需要注意以备将来参考，一旦您将项目的父项设为弹性框，float 属性将被完全忽略并且可以删除。 Flexbox 也不会折叠边距。
我建议你做一些关于css和html5定位的研究甚至教程。我会更进一步，研究引导程序/响应式样式，也就是移动

标签： html css web flexbox css-float

【解决方案1】：

这就是你要找的吗？

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

CodePen

【讨论】：

【解决方案2】：

你可以为你的容器使用 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-direction: row-reverse”并将列表移到空白处，一切看起来都很好。再次感谢

【解决方案3】：

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>

【讨论】：

【解决方案4】：

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

.container { display: flex; }

然后是图片部分：

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

然后，内容部分：

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

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

删除绝对位置，浮动并根据需要处理 .section_img1 高度。

【讨论】：

【解决方案5】：

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

【讨论】：