@mUchenik

Съезжает текст при уменьшении разрешения, что не так делаю?

Всем добра!
Что я не так делаю?
Есть вот такая разметка:
<div class="container">
  <div class="list-wrap col-md-12">

	<img src="img/1122.jpg" class="img_mylog">
	<h1 class="zag">Заголовок 1<hr></h1>

      <div class="col-md-6 text">
        <ul>
          <li>Текст1</li>
          <li>Текст2</li>
          <li>Текст3</li>
        </ul>        
      </div>
      <div class="col-md-6 text">
        <ul>
          <li>Текст1</li>
          <li>Текст2</li>
          <li>Текст3</li>
        </ul>        
      </div>
	  </div>
  </div>


И CSS:
img.img_mylog {
    display: block;
    float: left;
}
.col-md-6.text {
    width: 30%;
}

hr {
    margin-top: 3px;
    margin-bottom: 6px;
    border: 0;
    border-top: 3px solid #9e9e9e;
}


Подключен бутстрап, и при попытке проверить адаптивность обнаружил, что текст съезжает:
5a575288b8d8c141271996.jpeg
При попытке изменить
.col-md-6.text {
width: 30%;
}
Ни чего не происходит...
  • Вопрос задан
  • 1079 просмотров
Пригласить эксперта
Ответы на вопрос 1
LucasKane
@LucasKane
Front-end Developer
Потому что высота разная - вот и съезжает, делать либо на флексах, либо по старинке:

Флаг с бордером и текстом кладете в один блок.
Ставите Флагу float: left, а блоку с текстом и заголовком, паддинг влево на ширину блока с флагом.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы