БЛОГ НА HUSL


Зависимость высоты блока от длины текста в названии

Автор вопроса: sto

Помогите пож решить проблему "скачущих" блоков. Почему-то в зависимости от длины названия продукта блоки с ними пляшут вверх-вниз

Мой код:

https://output.jsbin.com/xixokiwofo (справа вверху переход в редактор кода)

.product-cart{
background: #f5f5f5 none repeat scroll 0 0;
border: 2px solid #eee;
display: inline-block;
margin-bottom: 30px;
margin-left: 1em;
max-width: 250px;
padding: 0.5em;
}

.product-cart .item-title {
  font-size: 1.2em;
  font-weight: bold;
  height: 2em;
  margin-bottom: 1em;
}
img.alignleft, .alignleft {
  float: left;
  margin-left: 0;
  margin-right: 20px;
}
img {
  border: 0 none;
  box-sizing: border-box;
  height: auto;
  vertical-align: middle;
   max-width: 100%;
}

.offer-table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
<div class="wrapper grid-product clearfix ">

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>
<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>


<div class="product-cart">
		<div class="item-title">Тестовый продукт</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Ещё один тестовый продукт с более длинным названием в три строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

</div>


Источник

Ответы (3 шт):

Автор решения: vantal

Как вариант для основного контейнера добавить display: flex; и flex-wrap: wrap;

.wrapper{
  display: flex;
  flex-wrap: wrap;
}
.product-cart{
  background: #f5f5f5 none repeat scroll 0 0;
  border: 2px solid #eee;
  display: inline-block;
  margin-bottom: 30px;
  margin-left: 1em;
  max-width: 250px;
  padding: 0.5em;
}

.product-cart .item-title {
  font-size: 1.2em;
  font-weight: bold;
  height: 3em;
  margin-bottom: 1em;
}
img.alignleft, .alignleft {
  float: left;
  margin-left: 0;
  margin-right: 20px;
}
img {
  border: 0 none;
  box-sizing: border-box;
  height: auto;
  vertical-align: middle;
   max-width: 100%;
}

.offer-table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
<div class="wrapper grid-product clearfix ">

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>
<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>


<div class="product-cart">
		<div class="item-title">Тестовый продукт</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Ещё один тестовый продукт с более длинным названием в три строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

<div class="product-cart">
		<div class="item-title">Тестовый продукт с названием в две строки</div>
		<div class="item-img">  	
    		<img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    	</div>

		<div class="offer-table">
			<table>
				<tbody>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				<tr><td class="offer-key">Параметр</td><td class="offer-value">значение</td></tr>
				</tbody>
			</table>
		</div>

</div>

</div>

→ Ссылка
Автор решения: Roman

Дивы .product-cart показаны как inline-block. В таком случае можно просто задать vertical-align: top;

→ Ссылка
Автор решения: Sevastopol'

Достаточно для блоков .product-cart добавить свойство vertical-align: top;. И всё решение.

Для .product-cart .item-title заменить height: 2em; на min-height: 2.4em;

.product-cart {
  background: #f5f5f5 none repeat scroll 0 0;
  border: 2px solid #eee;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 30px;
  margin-left: 1em;
  max-width: 250px;
  padding: 0.5em;
}

.product-cart .item-title {
  font-size: 1.2em;
  font-weight: bold;
  min-height: 2.4em;
  margin-bottom: 1em;
}

img.alignleft,
.alignleft {
  float: left;
  margin-left: 0;
  margin-right: 20px;
}

img {
  border: 0 none;
  box-sizing: border-box;
  height: auto;
  vertical-align: middle;
  max-width: 100%;
}

.offer-table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
<div class="wrapper grid-product clearfix ">

  <div class="product-cart">
    <div class="item-title">Тестовый продукт с названием в две строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="product-cart">
    <div class="item-title">Тестовый продукт</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="product-cart">
    <div class="item-title">Тестовый продукт с названием в две строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  <div class="product-cart">
    <div class="item-title">Тестовый продукт с названием в две строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="product-cart">
    <div class="item-title">Тестовый продукт с названием в две строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>


  <div class="product-cart">
    <div class="item-title">Тестовый продукт</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="product-cart">
    <div class="item-title">Ещё один тестовый продукт с более длинным названием в три строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <div class="product-cart">
    <div class="item-title">Тестовый продукт с названием в две строки</div>
    <div class="item-img">
      <img src="https://i.imgur.com/7OXpT2B.png" class="alignleft wp-post-image">
    </div>

    <div class="offer-table">
      <table>
        <tbody>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
          <tr>
            <td class="offer-key">Параметр</td>
            <td class="offer-value">значение</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.