0

Здравствуйте. Не получается сделать так чтобы карточки товара были одинакового размера.Я так понимаю это из-за того что количество текста внутри разное. Как сделать так чтобы карточки были одинаковой высоты и промежутки между ними были одинаковые.

.wrapper {
  max-width: 970px;
  height: 100%;
  margin: 3em auto;
}
.wrapper ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrapper li {
  display: inline-block;
}

.item {
  display: inline-block;
  max-width: 302px;
  height: 100%;
  border: 1px solid #E8E8E8;
  background-color: #F7F7F7;
  margin-bottom: 20px;
}

.item_img img {
  max-width: 100%;
  height: auto;
}

.item_info {
  padding: 0 20px;
  padding: 16px 18px;
  padding-bottom: 0px;
  color: #777;
  font-size: 12px;
}

.item_title {
  margin: 0px;
  margin-bottom: 10px;
  font-size: 15px;
  font-family: "AllerBd", sans-serif;
}

.item_text {
  line-height: 1.52em;
  font-size: 13.4px;
  margin-bottom: 18px;
  font-family: "DroidSans", sans-serif;
}

.item_border:after {
  content: "";
  display: block;
  height: 1px;
  width: 98.5%;
  margin: 0px auto;
  background: url(../img/2.png) repeat-x left center;
}
.item_border:before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 2px;
  background: url(../img/2.png) repeat-x left center;
}

.informer {
  position: relative;
  bottom: 0px;
  height: 40px;
  padding: 12px 17px;
  color: #999;
  font-size: 11px;
}

.informer_date, .informer_comments {
  display: block;
  line-height: 16px;
  font-family: "DroidSans", sans-serif;
}

.informer_date {
  padding-left: 22px;
  background: url(../img/3.png) no-repeat left top;
  float: left;
  position: relative;
}
.informer_date:after {
  display: block;
  width: 14px;
  height: 9px;
  line-height: 9px;
  content: "17";
  font-size: 8px;
  text-align: center;
  position: absolute;
  left: 0px;
  bottom: 2px;
}

.informer_comments {
  text-decoration: none;
  color: #999;
  float: right;
  padding: 0px 5px 0px 22px;
  background: url(../img/4.png) no-repeat left top;
}
	<div class="wrapper">
		<ul>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ullamcorper Nibh Parturient</h3>
						<p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer ">
						<span class="informer_date">17 january, 2012</span>
						<a href="" class="informer_comments">15</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Condimentum Ultricies Ullamcorper</h3>
						<p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">15 January, 2012</span>
						<a href="" class="informer_comments">21</a>
					</div>
				</div>
			</li>

			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Nibh Fusce Parturient Tristique</h3>
						<p class="item_text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">11 January, 2012</span>
						<a href="" class="informer_comments">23</a>
					</div>
				</div>
			</li>


			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Nullam Mattis Sit Tellus</h3>
						<p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer ">
						<span class="informer_date">09 January, 2012</span>
						<a href="" class="informer_comments">13</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Tortor Pharetra Fermentum</h3>
						<p class="item_text">Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">01 January, 2012</span>
						<a href="" class="informer_comments">17</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Porta Condimentum Tellus</h3>
						<p class="item_text">Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">05 January, 2012</span>
						<a href="" class="informer_comments">11</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ligula Inceptos Cursus Sit</h3>
						<p class="item_text">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec ullamcorper nulla non metus auctor fringilla. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">29 December, 2011</span>
						<a href="" class="informer_comments">11</a>
					</div>
				</div>
			</li>

			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Consectetur Ligula Etiam</h3>
						<p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">03 January, 2012</span>
						<a href="" class="informer_comments">13</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ornare Elit Cursus Tellus</h3>
						<p class="item_text">Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">25 december, 2011</span>
						<a href="" class="informer_comments">49</a>
					</div>
				</div>
			</li>
		</ul>
	</div>

1

2 ответа 2

1

Можно воспользоваться флексбоксами.

Для этого добавляем в

.wrapper ul {
    display: flex;
    flex-wrap: wrap;
}

Выравниваем дату по нижней границе карточки:

.item {
    position: relative;
}
.informer {
     position: absolute;
}
.item_info { /* оставляем снизу место для размещения .informer */
     margin-bottom: 40px; 
}

Также нужно задать фиксированную ширину для карточки (или хотя бы минимум, иначе все карточки станут в одну строку. Кроме того я бы убрал div.wrapper и div.item и оставшиеся ul и li выполняли бы функции контейнера и карточки соответственно.

.wrapper {
  max-width: 970px;
  height: 100%;
  margin: 3em auto;
}
.wrapper ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrapper li {
  display: inline-block;
}
.item {
  display: inline-block;
  width: 302px;
  height: 100%;
  border: 1px solid #E8E8E8;
  background-color: #F7F7F7;
  margin-bottom: 20px;
  position: relative;
}
.item_img img {
  max-width: 100%;
  height: auto;
}
.item_info {
  padding: 0 20px;
  padding: 16px 18px;
  padding-bottom: 0px;
  color: #777;
  font-size: 12px;
  margin-bottom: 40px;
}
.item_title {
  margin: 0px;
  margin-bottom: 10px;
  font-size: 15px;
  font-family: "AllerBd", sans-serif;
}
.item_text {
  line-height: 1.52em;
  font-size: 13.4px;
  margin-bottom: 18px;
  font-family: "DroidSans", sans-serif;
}
.item_border:after {
  content: "";
  display: block;
  height: 1px;
  width: 98.5%;
  margin: 0px auto;
  background: url(../img/2.png) repeat-x left center;
}
.item_border:before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 2px;
  background: url(../img/2.png) repeat-x left center;
}
.informer {
  position: relative;
  bottom: 0px;
  height: 40px;
  padding: 12px 17px;
  color: #999;
  font-size: 11px;
}
.informer_date,
.informer_comments {
  display: block;
  line-height: 16px;
  font-family: "DroidSans", sans-serif;
}
.informer_date {
  padding-left: 22px;
  background: url(../img/3.png) no-repeat left top;
  float: left;
  position: relative;
}
.informer_date:after {
  display: block;
  width: 14px;
  height: 9px;
  line-height: 9px;
  content: "17";
  font-size: 8px;
  text-align: center;
  position: absolute;
  left: 0px;
  bottom: 2px;
}
.informer_comments {
  text-decoration: none;
  color: #999;
  float: right;
  padding: 0px 5px 0px 22px;
  background: url(../img/4.png) no-repeat left top;
}
<div class="wrapper">
  <ul>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Ullamcorper Nibh Parturient</h3>
          <p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer ">
          <span class="informer_date">17 january, 2012</span>
          <a href="" class="informer_comments">15</a>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Condimentum Ultricies Ullamcorper</h3>
          <p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">15 January, 2012</span>
          <a href="" class="informer_comments">21</a>
        </div>
      </div>
    </li>

    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Nibh Fusce Parturient Tristique</h3>
          <p class="item_text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">11 January, 2012</span>
          <a href="" class="informer_comments">23</a>
        </div>
      </div>
    </li>


    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Nullam Mattis Sit Tellus</h3>
          <p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer ">
          <span class="informer_date">09 January, 2012</span>
          <a href="" class="informer_comments">13</a>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Tortor Pharetra Fermentum</h3>
          <p class="item_text">Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">01 January, 2012</span>
          <a href="" class="informer_comments">17</a>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Porta Condimentum Tellus</h3>
          <p class="item_text">Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">05 January, 2012</span>
          <a href="" class="informer_comments">11</a>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Ligula Inceptos Cursus Sit</h3>
          <p class="item_text">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">29 December, 2011</span>
          <a href="" class="informer_comments">11</a>
        </div>
      </div>
    </li>

    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Consectetur Ligula Etiam</h3>
          <p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">03 January, 2012</span>
          <a href="" class="informer_comments">13</a>
        </div>
      </div>
    </li>
    <li>
      <div class="item">
        <div class="item_img">
          <a href="#">
            <img src="http://placehold.it/300x200">
          </a>
        </div>
        <div class="item_info">
          <h3 class="item_title">Ornare Elit Cursus Tellus</h3>
          <p class="item_text">Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.</p>
          <div class="item_border"></div>
        </div>
        <div class="informer clearfix">
          <span class="informer_date">25 december, 2011</span>
          <a href="" class="informer_comments">49</a>
        </div>
      </div>
    </li>
  </ul>
</div>

1

Как один из вариантов - задать высоту блоку с текстом или всему блоку .item.

.item_text {
  ...  
  min-height: 100px; 
  max-height: 100px;
}

.wrapper {
  max-width: 970px;
  height: 100%;
  margin: 3em auto;
}
.wrapper ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.wrapper li {
  display: inline-block;
  vertical-align: top;
}

.item {
  display: inline-block;
  max-width: 302px;
  height: 100%;
  border: 1px solid #E8E8E8;
  background-color: #F7F7F7;
  margin-bottom: 20px;
}

.item_img img {
  max-width: 100%;
  height: auto;
}

.item_info {
  padding: 0 20px;
  padding: 16px 18px;
  padding-bottom: 0px;
  color: #777;
  font-size: 12px;
}

.item_title {
  margin: 0px;
  margin-bottom: 10px;
  font-size: 15px;
  font-family: "AllerBd", sans-serif;
}

.item_text {
  line-height: 1.52em;
  font-size: 13.4px;
  margin-bottom: 18px;
  font-family: "DroidSans", sans-serif;
  
  min-height: 100px; 
}

.item_border:after {
  content: "";
  display: block;
  height: 1px;
  width: 98.5%;
  margin: 0px auto;
  background: url(../img/2.png) repeat-x left center;
}
.item_border:before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 2px;
  background: url(../img/2.png) repeat-x left center;
}

.informer {
  position: relative;
  bottom: 0px;
  height: 40px;
  padding: 12px 17px;
  color: #999;
  font-size: 11px;
}

.informer_date, .informer_comments {
  display: block;
  line-height: 16px;
  font-family: "DroidSans", sans-serif;
}

.informer_date {
  padding-left: 22px;
  background: url(../img/3.png) no-repeat left top;
  float: left;
  position: relative;
}
.informer_date:after {
  display: block;
  width: 14px;
  height: 9px;
  line-height: 9px;
  content: "17";
  font-size: 8px;
  text-align: center;
  position: absolute;
  left: 0px;
  bottom: 2px;
}

.informer_comments {
  text-decoration: none;
  color: #999;
  float: right;
  padding: 0px 5px 0px 22px;
  background: url(../img/4.png) no-repeat left top;
}
<div class="wrapper">
		<ul>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ullamcorper Nibh Parturient</h3>
						<p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer ">
						<span class="informer_date">17 january, 2012</span>
						<a href="" class="informer_comments">15</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Condimentum Ultricies Ullamcorper</h3>
						<p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">15 January, 2012</span>
						<a href="" class="informer_comments">21</a>
					</div>
				</div>
			</li>

			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Nibh Fusce Parturient Tristique</h3>
						<p class="item_text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">11 January, 2012</span>
						<a href="" class="informer_comments">23</a>
					</div>
				</div>
			</li>


			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Nullam Mattis Sit Tellus</h3>
						<p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer ">
						<span class="informer_date">09 January, 2012</span>
						<a href="" class="informer_comments">13</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Tortor Pharetra Fermentum</h3>
						<p class="item_text">Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">01 January, 2012</span>
						<a href="" class="informer_comments">17</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Porta Condimentum Tellus</h3>
						<p class="item_text">Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">05 January, 2012</span>
						<a href="" class="informer_comments">11</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ligula Inceptos Cursus Sit</h3>
						<p class="item_text">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec ullamcorper nulla non metus auctor fringilla. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">29 December, 2011</span>
						<a href="" class="informer_comments">11</a>
					</div>
				</div>
			</li>

			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Consectetur Ligula Etiam</h3>
						<p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">03 January, 2012</span>
						<a href="" class="informer_comments">13</a>
					</div>
				</div>
			</li>
			<li>
				<div class="item">
					<div class="item_img">
						<a href="#"><img src="http://placehold.it/300x200"></a>
					</div>
					<div class="item_info">
						<h3 class="item_title">Ornare Elit Cursus Tellus</h3>
						<p class="item_text">Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros. </p>
						<div class="item_border"></div>
					</div>
					<div class="informer clearfix">
						<span class="informer_date">25 december, 2011</span>
						<a href="" class="informer_comments">49</a>
					</div>
				</div>
			</li>
		</ul>
	</div>

Ваш ответ

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

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