Замена float, который не работает, с flex, который тоже не работает

ProgramBox

Замена float, который не работает, с flex, который тоже не работает

Post author:admin
Запись опубликована:9 апреля, 2023
Post category:Вопросы по программированию

#html #css #web #flexbox #css-float

#HTML #css #веб #flexbox #css-float

Вопрос:

У меня есть фотография в качестве фонового изображения, и она размещена правильно. У меня также есть некоторый список, и я хочу, чтобы он был размещен слева. Но он застрял на photo. Я использовал float, но ничего не происходит. Я пробовал flex, но тоже ничего не происходит.

вот как сейчас выглядит страница

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

1. это потому, что вы позиционируете изображение в абсолютном виде и, похоже, оно занимает ширину 985 пикселей, поэтому, скорее всего, оно будет занимать большую часть экрана, а не только справа

2. Следует отметить на будущее, что как только вы сделаете родительский элемент flexbox, свойство float полностью игнорируется и может быть удалено. Flexbox также не сворачивает поля.

3. Я предлагаю вам провести некоторое исследование или даже обучающие программы по позиционированию css и html5. Я бы сделал еще один шаг и изучил bootstrap / адаптивный стиль, он же мобильный

Ответ №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>

Ответ №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%; }

Это дает вам базовую настройку для достижения того, к чему вы стремитесь.

Удалите абсолютные позиции, floatd и обработайте высоту .section_img1 по своему усмотрению.

Ответ №5:

Мне просто нужно было написать flex-direction: row-reverse; , и список переместился в пустое пространство, и все выглядит просто отлично