0

Всем привет есть сайт http://cash-back.kz/. Центральная часть с картинками сверстана сейчас вот так

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="487px">
            <img src="img/action_1.jpg"/>
        </td>
        <td>
         &nbsp;
        </td>
        <td width="487px">
        <img src="img/action_2.jpg"/>
        </td>
    </tr>
    </tabel>

Понимаю что это не хорошо, как правильно сверстать все это блоками div?

Спасибо за помощь.

2
  • 2
    а я не вижу ничего зазорного в вёрстке колонок таблицами
    – sinedsem
    5 авг 2014 в 16:47
  • поиграйся с display: table 2 июн 2017 в 18:24

2 ответа 2

0
<div id="wrapper">

  <div>
    <img src="http://cash-back.kz/img/action_1.jpg"/>
  </div>

  <div>
    <img src="http://cash-back.kz/img/action_1.jpg"/>
  </div>

    <div>
    <img src="http://cash-back.kz/img/action_1.jpg"/>
  </div>

  <div class="last">
    <img src="http://cash-back.kz/img/action_1.jpg"/>
  </div>

  </div>

#wrapper {
  position:relative;
  display:block;
  width:100%;
  max-width:1024px;
  text-align:center;
}

#wrapper div {
position: relative;
display: block;
width: 48%;
  max-width:487px;
float: left;
  margin: 0 30px 20px 0;
}

#wrapper div:nth-child(even) {
margin: 0 0 20px 0;
}

.last:after {
content:'.';
clear:both;
height:0;
display:block;
}

ДЕМО

0

Посмотрите в интернете урок по двухколоночной верстве дивами, это не сложно:

Пример верстки

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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