Совет по оптимальной верстке

261

12 февраля 2017, 10:03

Здравствуйте! Прошу совета,как лучше всего сверстать такой блок с возможностью адаптивности - на дивах или таблицей? Пробовала на дивах, очень геморно получается и ко всему прочему она не очень адаптивна. Таблица тоже довольно проблематичная получается.

Не могу понять,какой из этих способов менее проблематичный ) Код писать за меня не прошу, просто подскажите наиболее оптимальный вариант для такого вида

Спасибо заранее

Код, который я писала на дивах (не полный, т.к. полный был удален в угаре чистки и сейчас я переписываю).

.promo { 
	border-left: 5px solid red; 
} 
.promo h1 { 
	font-size: 2.5em; 
	margin-left: 15px; 
} 
.gender { 
	border-left: 2px solid red; 
} 
.gender p { 
	font-size: 1.5em; 
	margin: 0 0 5px 15px; 
} 
.men { 
	display: inline-block; 
} 
.men p:first-child { 
	font-size: 1.15em; 
	margin-left: 15px; 
} 
.women { 
	display: inline-block; 
} 
.women p:first-child { 
	font-size: 1.15em; 
	margin-left: 15px; 
} 
.men img { 
	float: left; 
	margin-right: 8px; 
} 
.women img { 
	float: left; 
	margin-right: 8px; 
}

     <div class="promo about"> 
	 <div ><h1>Аудитория</h1></div> 
	 </div> 
     <div class="gender"> 
	 <p>Пол</p> 
     <div class="men"><p><img src="men.jpg" alt="">Мужчины</p> 
     <p>50%</p> 
     </div> 
     <div class="women"><p><img src="w.jpg" alt="">Женщины</p> 
     <p>50%</p> 
     </div> 
     </div>

Answer 1

Мне кажется, что для вашей задачи лучше использовать div и делать его оптимальным с помощью flexbox. Это позволит вам редактировать любые размера блока, как вам удобно. При том сейчас таблицы редко используют для таких целей, так как современные стили полностью и прекрасно выполняют всю эту работу и делают её более удобнее.

Что бы сделать блоки гибкими используйте @media или величины vw и vh. Это позволит блокам подстраиваться под любые размеры экрана