Выравнивание. Верстка блока новостей

320
02 апреля 2017, 01:59

Надо сделать так. Но у меня получается вот так.

body { 
  background: #e9e9e9; 
} 
 
.block-name { 
  text-transform: uppercase; 
  font-size: 19px; 
  color: #535353; 
  border-bottom: 1px dashed #c2c2c2; 
} 
 
.such-post { 
  padding: 15px 10px; 
  min-height: 310px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
.post { 
  padding: 15px 10px; 
  min-height: 250px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
#search { 
  padding: 15px 10px; 
  height: 100px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
input[type="search"] { 
  height: 30px; 
  width: 100%; 
  border: none; 
  background: #e8e8e8; 
  padding: 10px; 
} 
 
.mini-post { 
  width: 100%; 
  height: auto; 
} 
 
.mini-post>img { 
  width: 27%; 
  display: inline-block; 
} 
 
.mini-post-name, 
.mini-post-comment { 
  overflow: hidden; 
  color: #717171; 
  width: 72%; 
  display: inline; 
  padding: 0 0 0 5px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div id="content"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-sm-3"> 
        <div class="such-post"> 
          <p class="block-name">Resent Post</p> 
          <div class="post-list"> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-6"> 
        <div class="post"> 
          <p class="block-name">Class aptent tacitı sociosu ad litora </p> 
        </div> 
      </div> 
      <div class="col-sm-3"> 
        <div id="search"> 
          <p class="block-name">Search</p> 
          <input type="search" placeholder="Search"> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
 
 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Как правильно сделать что-то вроде этого?

Answer 1

Задала .mini-post>img { float: left; } и .mini-post { overflow: hidden; }:

body { 
  background: #e9e9e9; 
} 
 
.block-name { 
  text-transform: uppercase; 
  font-size: 19px; 
  color: #535353; 
  border-bottom: 1px dashed #c2c2c2; 
} 
 
.such-post { 
  padding: 15px 10px; 
  min-height: 310px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
.post { 
  padding: 15px 10px; 
  min-height: 250px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
#search { 
  padding: 15px 10px; 
  height: 100px; 
  background: #fff; 
  box-shadow: 1px 1px 0px 0px rgba(217, 217, 217, 1); 
} 
 
input[type="search"] { 
  height: 30px; 
  width: 100%; 
  border: none; 
  background: #e8e8e8; 
  padding: 10px; 
} 
 
.mini-post { 
  width: 100%; 
  height: auto; 
   
  overflow: hidden; 
} 
 
.mini-post>img { 
  width: 27%; 
  display: inline-block; 
  float: left; 
} 
 
.mini-post-name, 
.mini-post-comment { 
  overflow: hidden; 
  color: #717171; 
  width: 72%; 
  display: block; 
  padding: 0 0 0 5px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div id="content"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-sm-3"> 
        <div class="such-post"> 
          <p class="block-name">Resent Post</p> 
          <div class="post-list"> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
            <div class="mini-post"> 
              <img src="http://vignette1.wikia.nocookie.net/vnrhistory/images/e/e2/%D0%9A%D0%B5%D0%BA.png/revision/latest?cb=20151015201730&path-prefix=ru" alt="0"> 
              <a href="" class="mini-post-name">Curabitur bibendum tortor in diam viverra</a> 
              <p class="mini-post-comment">2 comments</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-6"> 
        <div class="post"> 
          <p class="block-name">Class aptent tacitı sociosu ad litora </p> 
        </div> 
      </div> 
      <div class="col-sm-3"> 
        <div id="search"> 
          <p class="block-name">Search</p> 
          <input type="search" placeholder="Search"> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
 
 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

READ ALSO
Не работает путь файла ErrorDocument

Не работает путь файла ErrorDocument

Привет всем! У меня проблема: в файлеhtaccess не работает путь к следующим параметрам:

291
Нужно организовать поиск по сайту asp.net mvc

Нужно организовать поиск по сайту asp.net mvc

Что-то по типу Google Search, но GS работает только с проектами лежащими на доменеМне же нужно чтобы поиск выполнялся по проекту лежащему на localhoste

403
Очистка PictureBox от объектов Graphics

Очистка PictureBox от объектов Graphics

Всем доброго времени! можно ли очистить pictureBox от нарисованных Image так, что бы очистились только те объекты Image у которыхTag совпадает с

454
Проблема с отображением данных в ChartControl WPF

Проблема с отображением данных в ChartControl WPF

Установил DataSourse в IEnumerable, в DataContext подцепил

323