CSS | Свойство float:left, блоки налазят друг на друга

113
26 октября 2021, 09:30
  <div class="col-lg-6 create-news-left-block">
        <h2>Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem
            ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
        <div class="block-left-helper">
            <h4>Помощь сервису в развитии</h4>
            <div class="block-left-helper-img">
                <?= Html::img('images/help-portal.png', ['alt' => 'logo']) ?>
            </div>
            <div class="block-left-helper-text">
                ewqkhj ehwqjoe
            </div>
        </div>
        <div class="block-left-helper">
            <h4>Прокачайте навыки журналиста</h4>
            <div class="block-left-helper-img">
                <?= Html::img('images/help-portal.png', ['alt' => 'logo']) ?>
            </div>
            <div class="block-left-helper-text">
                ewqkhj ehwqjoe
            </div>
        </div>
        <div class="block-left-helper">
            <h4>Поделитесь интересной новостью с нами</h4>
            <div class="block-left-helper-img">
                <?= Html::img('images/help-portal.png', ['alt' => 'logo']) ?>
            </div>
            <div class="block-left-helper-text">
                ewqkhj ehwqjoe
            </div>
        </div>
    </div>

я задаю для block-left-helper-img float:left;, чтобы текст отображался по правой стороне. Но получаю такой результат

Как правильно сделать, чтобы картинка была слева, текст - справа. Никак не получается

Answer 1

вроде так если я все правильно понял

.block-left-helper-img{ 
  background: green; 
  height: 100px; 
  width: 100px; 
} 
.block-left-helper{ 
  display: flex; 
  flex-direction: row; 
  margin-top: 30px; 
} 
.block-left-helper-text{ 
  margin-left: 20px; 
}
<div class="col-lg-6 create-news-left-block"> 
        <h2>Lorem ipsum dolor</h2> 
        <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem 
            ipsum dolorLorem ipsum dolorLorem ipsum dolor</p> 
        <div class="block-left"> 
        <div class="block-left-helper"> 
             
            <div class="block-left-helper-img"> 
                тут картинка 
            </div> 
            <div class="block-left-helper-text"> 
            <h4>Помощь сервису в развитии</h4> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
        <div class="block-left-helper"> 
             
            <div class="block-left-helper-img"> 
                тут картинка 
            </div> 
            <div class="block-left-helper-text"> 
            <h4>Прокачайте навыки журналиста</h4> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
        <div class="block-left-helper"> 
             
            <div class="block-left-helper-img"> 
                тут картинка 
            </div> 
            <div class="block-left-helper-text"> 
            <h4>Поделитесь интересной новостью с нами</h4> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
        </div> 
    </div>

Answer 2

Нужно задать блокам block-left-helper свойство clear: both - тогда они не будут наползать друг на друга

.block-left-helper { 
  clear: both; 
} 
.block-left-helper-img { 
  float:left; 
}
<div class="col-lg-6 create-news-left-block"> 
        <h2>Lorem ipsum dolor</h2> 
        <p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem 
            ipsum dolorLorem ipsum dolorLorem ipsum dolor</p> 
 
        <div class="block-left-helper"> 
            <h4>Помощь сервису в развитии</h4> 
            <div class="block-left-helper-img"> 
                <img src="http://dummyimage.com/120" alt="" /> 
            </div> 
            <div class="block-left-helper-text"> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
        <div class="block-left-helper"> 
            <h4>Прокачайте навыки журналиста</h4> 
            <div class="block-left-helper-img"> 
                <img src="http://dummyimage.com/120" alt="" /> 
            </div> 
            <div class="block-left-helper-text"> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
        <div class="block-left-helper"> 
            <h4>Поделитесь интересной новостью с нами</h4> 
            <div class="block-left-helper-img"> 
                <img src="http://dummyimage.com/120" alt="" /> 
            </div> 
            <div class="block-left-helper-text"> 
                ewqkhj ehwqjoe 
            </div> 
        </div> 
    </div>

Answer 3
.block-left-helper {
  clear: both;
}

либо display:block

READ ALSO
Заполнить массив по кругу
c++

Заполнить массив по кругу

Вот здесь заполнено, но не в нужную сторону, помогите развернуть пожалуйста, очень срочно требуется(((

 89
Можно ли в Qt делать необычные окна?
c++

Можно ли в Qt делать необычные окна?

надо написать программу на Qt/C++ (ОС Arch Linux), которая по сути является оконным менеджеромНо только окна там должны перемещаться по "кубу" (только...

 222
Практическое применение std::string_view
c++

Практическое применение std::string_view

Мне понятно, что std::string_view это строка, имеющая только указатель и длину, без владения, управления памятью и даже без завершающего нуля — и поэтому...

 186
Соединить две (или более) текстуры в одну
c++

Соединить две (или более) текстуры в одну

Долгое время воевал один с этой задачей, но больше сил нетПростая задача - объединить две (или более) картинки в одну, чтобы наложить на эту...

 111