Блок уходит вниз при добавлении в него заголовка

abubakr · December 14, 2016

Здравствуйте!
Проблема: При доб. текста в "div.block-item" (внутри тегов <p>,<span>,<h5>) он уходит вниз.

С помощью "display: table" для <h5> можно это исправить, однако "text-align: center" не будет работать.

Код HTML:

<html>
	<head>
		<link rel="stylesheet" href="style.css">
		<meta charset="utf-8">
	</head>
<body>
	<div class="center">
		<div class="block">
                   <div class="block-item"></div>
                   <div class="block-item">
                       <h5>TEXT</h5>		
                   </div>
                   <div class="block-item"></div>
        </div>
	</div>
</body>
</html>

Код CSS:

.center{
	width:1200px;
	margin: 0 auto;
}
.block{
	margin-top: 30px;
	border: 1px solid #000;
}

.block-item{    
    	display: inline-block;
    	margin-right: 30px;
    	width: 360px;
    	height: 450px;
    	background: #fff3f0;
}
.block-item:last-child{margin-right: 0;}
.block-item:hover h5{display:none;}

В чем проблема и как можно его исправить?
Заранее спасибо.

radioactive · December 15, 2016

можно так

.block {
  overflow: hidden;
}
.block-item {
  float: left;
  *display: inline-block;
}

или так

.block {
  font-size: 0;
}
.block-item {
  font-size: 16px;
  overflow: hidden;
}

или так

.block{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox
}

решений куча, вся проблема в инлайне, гуглите их стантартное поведение

кстати кроссбраузерный inline-block будет таким

.block-item{
  display:-moz-inline-stack;   /*Firefox 2*/
  display:inline-block;    /*Хорошие браузеры*/
  _overflow:hidden;    /*IE6, IE7*/
  *zoom:1;   /*включаем hasLayout для IE6, IE7*/
  *display:inline;   /*при hasLayout true display:inline в IE6, IE7 ведёт себя как display:inline-block*/
}

Switch74 · December 14, 2016

text-align:top для .block-item попробуйте

abubakr · December 14, 2016

5 часов назад, Switch74 сказал:

text-align:top для .block-item попробуйте

Может имели ввиду vertical-align: top;?
Получилось. Спасибо.
Почему же по умолчанию блок не стоит на своем месте? Решение проблемы с v-align-ом это единственное (правильное, адекватное)? Не возникнут ли в дальнейшем какие-нибудь проблемы?

Switch74 · December 15, 2016

да, именно vertical-align, запарился немного

Sign In

Блок уходит вниз при добавлении в него заголовка

Question

abubakr

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

radioactive

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

abubakr

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information