2

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

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

Спасибо заранеевведите сюда описание изображения

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

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

3
  • Какая может быть проблематичность в дивах? И конечно если говорить об адаптивности, то это сразу дивы. Покажите что вы сверстали 10 фев 2017 в 6:39
  • Добавила в вопрос. И да, он, мягко говоря, не очень )
    – Alla
    10 фев 2017 в 7:45
  • 2
    Вы не правильно подходите к верстке. Сначала сверстайте 2 блока, левый и правый, сделайте стили так, что на мелких разрешениях, блоки четко заполняли пространство. Не нужно городить внутри этих блоков информацию до того, как не разобрались с внешней структурой. Идите поэтапно. А ответ от Юрия вам поможет в этом. Помните идите сверху вниз. И тут нет ничего сложного, большое количество кода появляется когда много элементов, от этого не уйти. Но можно упросить разбив на подстраницы в каком нибудь билд проекте для интерфейса 10 фев 2017 в 8:06

1 ответ 1

3

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.