Блог

Главная - Вопросы по программированию - CSS: предотвращает перемещение оси Y div, когда я добавляю текст внутри , который находится внутри этого div

CSS: предотвращает перемещение оси Y div, когда я добавляю текст внутри , который находится внутри этого div

#html #css

#HTML #css

Вопрос:

Посмотрите на div#1, почему он опускается, когда я добавляю текст внутри div#2>p Я пытался выяснить, но ничего. Я новичок в CSS. Я не могу понять, как работает этот css3, я не дизайнер, я программист, это доставляет много головной боли.

p.n: внутри кода нет div #1/2, оба из одного класса: container , Danke

 .img {
  width: 170px;
  height:150px;
  background: orange;
}
.contenedor:not(:first-child) {
  margin: 0 50px;
}
.contenedor {
  display: inline-block;
  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
  transition: .1s;
  cursor: pointer;
  resize: none;
  max-width: 170px;
}
.contenedor:hover {
  box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}  
 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <div class="contenedor">
        <div class="img">DIV #1</div>
        <div class="leyenda">
            <h4><b>John Doe</b></h4>
            <p><b>This should be up.</b></p>
        </div>
    </div>
    
    <div class="contenedor">
        <div class="img">DIV #2</div>
        <div class="leyenda">
            <h4><b>Jane Doe</b></h4>
            <p>Post you charge here.Post you 
              charge here.Post you charge here.</p>
        </div>
    </div>
    
</body>
</html>

Ответ №1:

Добавить vertical-align: top; в .contenedor (у него есть display: inline-block; , поэтому по умолчанию он выровнен по базовой линии):

 .img {
  width: 170px;
  height:150px;
  background: orange;
}
.contenedor:not(:first-child) {
  margin: 0 50px;
}
.contenedor {
  display: inline-block;
  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.4);
  transition: .1s;
  cursor: pointer;
  resize: none;
  max-width: 170px;
  vertical-align: top;
}
.contenedor:hover {
  box-shadow: 0 8px 16px 0px rgba(0,0,0,0.4);
}
.leyenda {padding:0 10px 20px 10px;}  
 <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>

</style>
<body>
	<div class="contenedor">
		<div class="img">DIV #1</div>
		<div class="leyenda">
			<h4><b>John Doe</b></h4>
			<p><b>This should be up.</b></p>
		</div>
	</div>
	
	<div class="contenedor">
		<div class="img">DIV #2</div>
		<div class="leyenda">
			<h4><b>Jane Doe</b></h4>
			<p>Post you charge here.Post you 
              charge here.Post you charge here.</p>
		</div>
	</div>
	
</body>
</html>