Как лучше верстать?

344
30 декабря 2016, 10:03

Друзья, сейчас верстаю макет. Опыта не много. Хотел узнать, как лучше будет сверстать конкретный блок. С помощью таблицы или дивами, но с применением display

Answer 1

Я может и не правильно сделал , но вроде похоже

.table{ 
	display:table; 
	margin:auto; 
} 
.table-cell{ 
	display:table-cell; 
	max-width:150px; 
	min-width:150px; 
	text-align:center; 
	border:1px solid #ccc; 
	font-size:12px; 
	position:relative; 
} 
.ch{ 
position:absolute; 
left:0; 
}
<h2>Название</h2> 
<div class="table">  
  <div class="table-cell">  
	   Рейс 
	 </div> 
  <div class="table-cell">  
	  Вылет 
	</div> 
  <div class="table-cell">  
	  Прилёт 
	 </div> 
  <div class="table-cell">  
	   В пути 
	 </div> 
  <div class="table-cell">  
	  Самолёт 
	</div> 
  <div class="table-cell">  
	  Класс 
	 </div> 
</div> 
<div class="table"> <!--2--> 
  <div class="table-cell">  
	  <input type="checkbox" class="ch"> SN-120 
	 </div> 
  <div class="table-cell">  
	  08:50 Чита 
	</div> 
  <div class="table-cell">  
	  11:50 Домодедово 
	 </div> 
  <div class="table-cell">  
	   9:00 
	 </div> 
  <div class="table-cell">  
	  Боинг 737-800 
	</div> 
  <div class="table-cell">  
	  Э / 4 
	 </div> 
</div> 
<div class="table"> <!--2--> 
  <div class="table-cell">  
	 	  <input type="checkbox" class="ch">  SN-120 
	 </div> 
  <div class="table-cell">  
	  08:50 Чита 
	</div> 
  <div class="table-cell">  
	  11:50 Домодедово 
	 </div> 
  <div class="table-cell">  
	   9:00 
	 </div> 
  <div class="table-cell">  
	  Боинг 737-800 
	</div> 
  <div class="table-cell">  
	  Э / 4 
	 </div> 
</div>

ссылка на песочницу мне кажется что лучше

READ ALSO
Nullreference ошибка в xamarin android amazon s3, как испаравить?

Nullreference ошибка в xamarin android amazon s3, как испаравить?

Здравствуйте, здесь мой последний оплот надеждыУже в течении дня не могу понять, почему я получаю ошибку NullReferenceError при вызове асинхронных...

393
Как поменять алгоритм шифрование в AsymmetricAlgorithm

Как поменять алгоритм шифрование в AsymmetricAlgorithm

Задача уйти от ошибки в проверки подписи объекта SignedXmlПроблема в том, что после последних обновлений windows, они отключили поддержку алгоритма

422
Теряется фокус кнопки

Теряется фокус кнопки

При наведении на кнопку теряется фокус при положении курсора в пустом месте между границей кнопки и надписью кнопки

352
Змейка c# , изменение направления

Змейка c# , изменение направления

Тут реализована смена направления у змейки

608