1

Хочу сделать что-то вроде области с каталогом постов, но div'ы либо выводятся друг под другом, либо если указать свойство display: inline-block они расположены неровно по отношению друг к другу

введите сюда описание изображения


а при параметре блока float:left враппер со всеми своими элементами вообще дальше середины не идет.
Подскажите пожалуйста как без мучений сделать нормальный вывод блоков?

введите сюда описание изображения

Код:

* {
	margin:0px;
	padding:0px;
}

body {
	background:grey;
	font-family: Roboto, Arial;
	font-size: 11pt;	
}

#top {
	height:95px;
	background:#152e46;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#wrapper {
	width:100%;
	background:url(../images/bg.png) repeat;
	margin:-4px 0 0 0;
}

.content {
	width:960px;
	margin:0px auto;
}

#header {
	padding:35px 0px 35px 0px;
	color:#fff;
}

#container {
	width:645px;
}

#container img{
	padding:0px 15px 15px 0px;
}

.sidebar {
	width:314px;	
	float:right;
	padding:0px 0 0 0px;
}

.sidebar img{
	margin:0px 7px 15px 0px;
}

.sidebar img.noright{
	margin-right:0px;
}

#footer .sidebar img{
	width:140px;
	height:141px;
}

#footer {
	background:#1c1c1c;
	clear:both;
	margin: 0;
}

#footer .content {
	padding:15px 0 40px 0;
	background:#1c1c1c;
}

h6 {
	display:inline-block;
	padding:17px 0;
	font-family:"Roboto";
}

h6 a{
	margin:0px 25px 0px 0px;
	color:#cbe4ec;
	font-size:18px;
	text-decoration:none;

}

h6 a:hover{
	text-decoration:underline;
}

#insidetop {
	margin:0 auto;
	width:950px;
}

.copyright {
	font-size:11px;
	color:#bfbfbf;
	float:left;
	text-transform:uppercase;
	margin:10px 0 10px 0;
}

#wrapper .content {
	padding: 20px;
}

.info {
	width: 623px;	
	background: white;
	margin-bottom: 15px;
	padding-bottom: 15px;
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
	border-radius: 4px;
}

.logo {
	background: url(../images/logo.jpg);
	margin: 5px;
	float: left;
	width: 80px;
	height: 80px;
}

.box {

}

.one-item {
	display: inline-block;
	background: white;
	margin: 20px 18px 0 0;
	width: 300px;
	height: 400px;
	border-radius: 4px;
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
}

.one-item img {
	width: 100%;
}

.sidebar-item {
	width: 290px;
	height: 140px;
	margin-bottom: 20px;
	background: white;
	box-shadow: 0 0 2px rgba(0,0,0,0.4);
	border-radius: 4px;
}

.description {
	margin: 15px 10px 0 10px;
}

/*---------top-menu------------*/


.top-menu {
	float: right;
	padding-top: 15px;
	margin: 10px 18px 0 0;
}

.clear {
  clear: both;
}

.navigation {
  margin-right: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #21486d;
  border-radius: 5px;
  font-size: 18px;
  /*
  box-shadow:  0px -2px 3px -1px rgba(0, 0, 0, 1);
  */
}

.navigation li {
  float: left;
}

.navigation li:hover {
  background: #222;
}

.navigation li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigation ul {
  display: none;
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
  overflow: hidden;
  font-size: 16px;
}

.navigation ul li {
  float: none;
}

.navigation li:hover > ul {
  display: block;
  background: #222;
  
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  
  -webkit-box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow:  0px 3px 3px 0px rgba(0, 0, 0, 0.25);
}

.navigation li:hover > ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
  background: #000;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
/*---------top-menu------------*/
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Kursa4</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">		
	<link rel="stylesheet" type="text/css" href="css/slider.css">
	
</head>
<body>

	<div id="top">
		<div id="insidetop">
			<div class="logo"></div>
			<!-------TOP-MENU--------->
			<div class="top-menu">
				<ul class="navigation">
					<li><a href="" title="Home">Home</a></li>
					<li><a href="" title="About us">About us</a></li>
					<li><a href="" title="Portfolio">Portfolio</a>
					  <ul>
						<li><a href="" title="Websites">Websites</a></li>
						<li><a href="" title="Webshops">Webshops</a></li>
						<li><a href="" title="SEO">SEO</a></li>
						<li><a href="" title="Responsive webdesign">Responsive webdesign</a></li>
					  </ul>
					</li>
					<li><a href="" title="Contact">Contact</a></li>
					<div class="clear"></div>
				</ul>
			</div>
			<!-------TOP-MENU--------->
		</div>
	</div><!-- top -->

	<div id="wrapper">	
		<div class="content">
			<!-------SIDEBAR--------->
			<div class="sidebar">
				<div class="sidebar-item"></div>
				<div class="sidebar-item"></div>				
			</div>
			<!-------SIDEBAR--------->
			<div id="container">				 
				<div class="info">	
					<div style="margin:0;padding:0;">
						<div class="slides">
							<ul> <!-- Слайды -->
								<li><img src="images/slider1.jpg" alt="image01" /></li>
								<li><img src="images/slider2.jpg" alt="image02" /></li>
								<li><img src="images/slider3.jpg" alt="image03" /></li>
								<li><img src="images/slider4.jpg" alt="image04" /></li>
							</ul>
						</div>
					</div>
					<div class="description">
						<p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p>
						<p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p>										
					</div>
				</div> 			
				<div class="box">
					<div class="one-item">
						<img src="images/one-item.jpg">
						<p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p>
						<div class="item-bottom"></div>
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
						<p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p>
						<p>sdfs ldfsdk fnskd sdfs ldfs dkfnskdsdfsldf sdkfnsk dsdfsldfsdkfns kdsdf sldfsdkf nskdsd fsl dfsdk fnskdsldfs dkf nsk dsldf sdkfnskd</p>						
						<div class="item-bottom"></div>
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
					</div>
					
					<div class="one-item">
						<img src="images/one-item.jpg">
					</div>
				</div>					
			</div><!--container-->                        						
		</div><!--content-->
	</div><!--wrapper-->
		
	<div id="footer">
			<div class="content">   
				<a href="#"><span class="copyright">copyright 2016 Ivan K</span></a>                                      
			</div><!--content-->                       
	</div><!--footer-->    

	
</body>
</html>

1
  • Я использую последнее время flexbox для таких занятий, очень легко в освоении и результат тот что вам нужен, единственно нужно учесть кроссбраузерность
    – Taras M.
    13 дек 2016 в 2:36

2 ответа 2

0

Так себе решение, но попробуйте в вашем случае:

.one-item {
    display: inline-table;
    ...
}

Лучше конечно вам почитать про сеточную разметку.

0

Может быть так ??

* {
  margin: 0;
  padding: 0;
}
.main {
  width: 80%;
  margin: 10px auto;
}
.post:first-child,
.post:last-child {
  width: 100%;
  min-height: 260px;
  border: 3px double #f2f2f2;
  border-radius: 10px;
}
.post:first-child img,
.post:last-child img {
  display: block;
  width: 100%;
  max-height: 150px;
}
.post:first-child p {
  width: 95%;
  margin: auto;
  color: #666;
}
.post {
  width: 49%;
  float: left;
  max-height: 396px;
  overflow: hidden;
  border: 4px double #f9f9f9;
  box-sizing: border-box;
  margin: 1% .5%;
  border-radius: 10px;
}
.post img {
  display: block;
  width: 100%;
}
.post {
  box-sizing: border-box;
  overflow-Y: auto;
  border: none !important;
}
<div class="main">
  <div class="post">
    <img src="http://placehold.it/350x150" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/200x70" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/200x70" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/200x70" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/200x70" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/200x70" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
  <div class="post">
    <img src="http://placehold.it/350x150" alt="">
    <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Mauris
      blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada.</p>
  </div>
</div>

2
  • Фон все равно почему-то съезжает вверх, а посты остаются на сером фоне yadi.sk/i/ODrYbysr33QBe6
    – ivnku
    13 дек 2016 в 14:46
  • разумеется .... я и сделал как пример без 100% результата Вы если хотите результат , то скиньте хотя бы макет того что должно получится
    – user33274
    13 дек 2016 в 15:14

Ваш ответ

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

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