这是我的标题和图片的图片。正如您所看到的，标题和蓝线上方有空间。但是，如果没有标题，则标题上方的空间消失，图像现在更接近蓝线，例如此处。即使没有标题，如何仍保留标题上方的空间？基本上，我不希望我的图像移动到靠近蓝线的位置，即使没有标题，我也希望该空间保持在原位。我尝试min-height在标题类上应用，但当没有标题时仍然没有空格这是我的 HTML：<div class = "myComponentWrapper"> <div class = "myContainer" <div class = "Title"> <h2 class = "headTitle"> This my Header</h2> </div> </div> <div class "image"> <img class="myImage" .......> </div></div>
3 回答
达令说
TA贡献1821条经验 获得超6个赞
首先，您需要小心您的代码：
使用短横线命名 CSS 类名
使用双倍空格进行缩进
=设置属性时不要在周围添加空格
现在，为了解决您的问题，我认为您需要做的就是重置 h2 元素的边距，以确保总高度 h2 + 边距小于您min-height为标题容器设置的高度。
尝试一下，看看是否能解决您的问题：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="my-component-wrapper">
<div class="my-container">
<div class="title">
<h2 class="head-title">This my Header</h2>
</div>
</div>
<div class="image">
<img
class="my-image"
src="https://via.placeholder.com/800x200"
alt=""
/>
</div>
</div>
</body>
</html>
/* style.css */
body {
margin: 0;
padding: 0;
background-color: aqua;
}
.my-image {
width: 100%;
}
.title {
min-height: 60px;
}
.head-title {
margin: 0;
padding: 10px 0;
}
冉冉说
TA贡献1877条经验 获得超1个赞
设置标题的最小高度值，该值等于其行高值。这样，即使没有文本内容，标题空间也不会折叠。
.headTitle {
min-height: 40px;
line-height: 40px; // set these values as you want, they just need to be equal
}
<div class = "myComponentWrapper">
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
慕虎7371278
TA贡献1802条经验 获得超4个赞
可能有多种方法可以做到这一点。我将描述一个我认为简单的例子。
使用条件边距
您可以（通过检查）找出标题的高度加上标题和图像之间的间隙，然后您可以做的是将条件边距顶部应用于类来实现它.image。
假设标题 + 间隙的高度为 40px，间隙本身为 20px，这就是您可以执行的操作。
/* We give this margin-top by default. This includes header height + gap*/
.image {
margin-top: 40px;
}
/* If there's myContainer div, which i am assuming only comes in when you have the header, we reduce that margin top to 20px to compensate for the header that exists.*/
.myContainer + .image {
margin-top: 20px;
}
您还可以为标头元素指定特定的高度，然后此计算对您来说会变得更容易，而不是通过检查来查找所占用的垂直空间。
注意：如果您没有为其指定特定高度，您还需要担心line-height元素的高度。h2在这种情况下，您需要添加计算的标题line-height和图像之间的间隙，然后使用它代替margin-top40px，如上所示。
更新：
如果我所做的假设是错误的，那么您就不能使用同级选择器来应用这些规则。在这种情况下，您需要更改标记以使标题和图像成为同级，或者可以选择更复杂的路线并使用 JavaScript（不推荐）。
从语义上讲，如果可以的话，我希望将它们保留为兄弟姐妹（假设我可以控制标记生成）。在那种情况下，它看起来像这样。
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
然后我会使用相同的同级选择器技巧来完成任务。
JavaScript 方式
如果您无法控制标记生成，则可以使用 JS 有条件地应用边距。
// Rough example of what you can do assuming the height of header is 20px.
// If you want to find out the height of header dynamically, use
// ```header.offsetHeight``` and add that with 20px(assumed gap height) and apply that as margin top.
const header = document.querySelector(".headTitle");
const image = document.querySelector(".image");
if(header) {
image.style.marginTop = '20px';
} else {
image.style.marginTop = '40px';
}
添加回答
举报
0/150
提交
取消