Привет всем, есть страница с тремя блоками с фиксированной высотой. Для адаптации блоков использую bootstrap. Если я задаю отступ между блоками, например: margin: 5px;
то третий блок уходит под остальные блоки. Как решить такую проблему?
http://codepen.io/zagonicb/pen/YGbXXy
<html>
<head>
<meta charset="UTF-8" />
<title>first page</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container flex-container">
<div class="row">
<!-- first block -->
<div class="col-xs-12 col-md-4 block" style="background-color: lightcoral">
<p>MARK MANSON</p>
<p>The darkside of the digital normad</p>
<a href="#">Travel</a>
<a href="#">close</a>
</div>
<!--second block-->
<div class="col-xs-12 col-md-4 block" style="background-color: darkorange">
<p>
The acknowledgement that something came from another source. The following sentence properly attributes an idea to its original author:
</p>
<p>
Jack Bauer, in his article "Twenty-Four Reasons not to Plagiarize," maintains that cases of plagiarists being expelled by academic institutions have risen dramatically in recent years due to an increasing awareness on the part of educators.
</p>
</div>
<!--third block-->
<div class="col-xs-12 col-md-4 block" style="background-color: turquoise">
<p>comments(45)</p>
<ul>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
<li>comment 1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
.flex-container {
display: flex;
align-items: center;
height: 600px;
}
.block {
height: 300px;
margin-left: 5px;
}
col-*-*
имеет строго заданную ширину. Когда вы дополнительно добавляете свойmargin
, то блоки просто не укладываются в контейнер и последний из них переносится вниз. В этом ничего удивительного.