flex картинка+параграф?

323
06 июля 2017, 01:57

Здравствуйте. У меня мало опыта работы с флексами, и вот я столкнулся с проблемой.

Задача:

1) картинку и параграф текста поставить на одну строку (фото слева, текст справа)

2) Соотношение между ширинами - ровно пополам, с небольшим отступом посредине

3) Когда ширина экрана достигает определенной - конструкция должна разбиваться на 2 строки.

С 2мя параграфами это получается (см. пример), но вот картинка+параграф ведет себя иначе.. как сделать такое же поведение у картинки+параграф?

Пример: codepen.io/AvonavI/pen/gRzqJx

Answer 1

Так?

.wrapper{ 
  max-width: 700px; 
  margin: 0 auto; 
  border: 1px solid #888; 
   
  display: flex; 
  flex-wrap: nowrap; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 30px; 
} 
p{ 
  width: 49%;   
} 
img { 
  width: 100%; 
} 
@media (max-width: 400px) { 
  .wrapper { 
      flex-wrap: wrap; 
  } 
  p { 
    width: 100%; 
  } 
}
<div class="wrapper"> 
  <p><img src="http://www.foxtrot.net.ua/medias/mission3.jpg?context=bWFzdGVyfHJvb3R8NTQ1OTV8aW1hZ2UvanBlZ3xoOGYvaDcyLzg5MDE5NjQxNjkyNDYuanBnfDczZjNjYmNlNTk4ZGVmZWI4YTJkMjRmZWYzMDY4NmI4Mzc5NTE3M2IxYjI0OTNjZmJkMGVkZmE5Yzg1MmQ3MzA" alt="" /></p> 
  <p class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo fugiat, maxime dignissimos accusamus veniam consequuntur architecto obcaecati porro quisquam quam ducimus, officia veritatis nulla facere repellendus explicabo. Animi quaerat dolorum nemo eius officiis ipsa vitae illo vero, perspiciatis ducimus porro voluptate quae alias dolorem, voluptatem fugit maxime vel repellat praesentium?</p> 
</div> 
 
<div class="wrapper"> 
   <p><img src="http://www.foxtrot.net.ua/medias/mission3.jpg?context=bWFzdGVyfHJvb3R8NTQ1OTV8aW1hZ2UvanBlZ3xoOGYvaDcyLzg5MDE5NjQxNjkyNDYuanBnfDczZjNjYmNlNTk4ZGVmZWI4YTJkMjRmZWYzMDY4NmI4Mzc5NTE3M2IxYjI0OTNjZmJkMGVkZmE5Yzg1MmQ3MzA" alt="" /></p> 
  <p><img src="http://www.foxtrot.net.ua/medias/mission3.jpg?context=bWFzdGVyfHJvb3R8NTQ1OTV8aW1hZ2UvanBlZ3xoOGYvaDcyLzg5MDE5NjQxNjkyNDYuanBnfDczZjNjYmNlNTk4ZGVmZWI4YTJkMjRmZWYzMDY4NmI4Mzc5NTE3M2IxYjI0OTNjZmJkMGVkZmE5Yzg1MmQ3MzA" alt="" /></p> 
</div>

Answer 2

Вы имеете ввиду вот такое поведение должно быть? https://codepen.io/anon/pen/awGMxJ для картинки задайте margin:0px auto;

img{
  max-width: 100%;
  flex: 1 1 200px;
  margin:0px auto;
}
READ ALSO
Посчитать длину подстроки в строке
MySQL

Посчитать длину подстроки в строке

Большая просьба помочь со следующей задачей, есть строки типа: "0000---111---222000001234567890" "0012345678900001"" то есть строки состоят из цифр от 0 до 9 и символа...

 330
Как правильно перенести базу данных MySql Wordpress?
MySQL

Как правильно перенести базу данных MySql Wordpress?

Обычно переносил сайты на wordpress путем копирования файлов и дампа базы данных с заменой url в самой, бд и правкой wp-configНо сейчас потребовалось...

 305
В чем заключается ошибка в SQL запросе?
MySQL

В чем заключается ошибка в SQL запросе?

Почему этот запрос выдает ошибку (#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'of France’ AND Countriesname = ‘France’...

 249
Хранить json в бд?
Java

Хранить json в бд?

Мне нужно, чтобы валюты обновлялись в реальном времениУ меня есть сервис openexchangerates

 236