T Magazine

by pharma_nsk

HTML

<body>
<div class="block">
<div class="tableContainer">
<div class="tableRow">
  <div class="table-cell th">
  <a href="#">autonews &#187;</a>
  </div>
  <div class="table-cell th">
  <a href="#">elementy &#187;</a>
  </div>
  <div class="table-cell th">
  <a href="#">techcult &#187;</a>
  </div>
</div>
<div class="tableRow">
  <div class="table-cell">
<img src="http://pics.autonews.ru/autonews_pics/onews/2016/07/21/130325.30404_600.jpg">
<p>
<a href="#">Глава Datsun: «Кризис в России – это время возможностей»</a>
</p>
<p>
<a href="#">Полугодовой выдержки. Тест-драйв нового Nissan Murano</a>
</p>
<p>
<a href="#">Сделано в Тольятти: существует ли экспорт российских автомобилей</a>
</p>
  </div>

<div class="table-cell">
<img src="http://elementy.ru/images/news/sagittaria_opaev_1_100.jpg">
<p>
<a href="#">Гибридизация однодомных и двудомных растений увеличивает разнообразие половых фенотипов</a>
</p>
<p>
<a href="#">Млекопитающие с относительно крупным мозгом более уязвимы</a>
</p>
<p>
<a href="#">LIGO поймала новые всплески гравитационных волн</a>
</p>
  </div> 
  
  <div class="table-cell">
<img src="http://www.techcult.ru/content/2016/3271/robot-nao-CFjf.jpg">
<p>
<a href="#">Робот Nao поможет адаптироваться детям беженцев</a>
</p>
<p>
<a href="#">Секретное оружие российской армии: железный человек или «Иван-терминатор»</a>
</p>
<p>
<a href="#">Cubimorph: прототип сенсорного устройства-трансформера с изменяемой формой</a>
</p>
  </div> 
  
</div>
</div>
</div>
</body>

CSS

body {background-color:white; text-transform: capitalize;}
.block {display:block;  width:80%; margin:30px auto; border:1px solid #E8E8E8; border-radius:2px; border-bottom:3px double #E8E8E8; padding:10px 5px;}
.tableContainer {display: table; }
.tableRow { display: table-row;}
.table-cell {display: table-cell; font-size:10px; padding:5px;}
.table-cell a {text-decoration:none; color:black;}
img {Height:50px; float:right; margin-top:10px;}
.table-cell:first-child, .table-cell:nth-child(2)  {BORDER-RIGHT:1px solid #E8E8E8;}
.th {font-weight:bold; font-size:12px;}
.table-cell p {border:1px solid white;}
.table-cell p:hover {border:1px dotted grey;}
.th a:hover {color:blue;}