Перейти к содержимому

Сервис обмена электронных валют


Как отменить выравнивание блоков в линию bottstrap? Код и картинка прилагается.

#1 pikiviki

pikiviki
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 10 Июль 2015 - 12:59

Хочу сразу же извинится за опечатку в заголовке. 

 

Здравствуйте уважаемые форумчане. Столкнулся с проблемой при использовании bootstrap.

В bootastrpa по умолчанию блоки выравниваются в линию вот так http://codepen.io/anon/pen/PqeOOM

и следующая линия блоков находится на расстоянии самого длинного блока в первой линии блоков. Как сделать так чтобы каждый блок второй линии блоков был сразу же под каждым блоком первой линии. 

 

Вот более наглядно. 

 

b229c16d8795.jpg

 


 

 

Сообщение отредактировал pikiviki: 10 Июль 2015 - 13:02

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 10 Июль 2015 - 18:02

@pikiviki, скрипт http://masonry.desandro.com/ вам в помощь.

 

Как то так:

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
*{
  padding:0;
  margin:0;
}
ul.grid{
  width:100%;
  list-style:none;
}
ul.grid li{
  width:30%;
  float:left;
  background:#ccc;
  margin:5px 0 0 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
$(document).ready( function() {
  $('.grid').masonry({
    itemSelector: '.grid li'
  });
});
</script>
</head>
<body>
<ul class="grid">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ratione unde nam iure odit autem quibusdam sunt enim harum dolore amet recusandae aliquam labore, ea saepe nisi provident ducimus repellat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, dolore?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Fugit voluptatibus saepe dolorem ullam, assumenda quisquam sequi officia accusamus natus molestias vero quod excepturi magni, nihil fuga vitae. Nesciunt ab maxime inventore expdivcabo suscipit sed asperiores, omnis labore temporibus nam, dolore.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Ipsa nobis accusamus ad facere magni, minima nostrum temporibus consectetur at eveniet, porro saepe tenetur, molestiae, repellat quod debitis non quibusdam dolorem vitae. Ut dignissimos, a moldivtia quaerat voluptatum enim ab illum.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Sapiente, numquam.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing edivt. Nostrum impedit cupiditate, suscipit officia expdivcabo? Illum non distinctio aut odio iste obcaecati harum soluta a totam, nisi, sed quidem repellat nesciunt.</li>
</ul>
</body>
</html>

Сообщение отредактировал yury: 10 Июль 2015 - 18:15

  • 0

#3 pikiviki

pikiviki
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 10 Июль 2015 - 19:54

@yury, спасибо вам большое вы мне очень помогли. 


  • 0


Оформление форума – IPBSkins.ru