html - 控制元素 html 和 css 的尺寸

Question

我有一个包含 2 个元素的 header 元素 - 一个 img 和 p 元素。

我希望页眉高度与其包含的图像的高度相同，这样当我删除边距并填充它时“适合”。

有没有办法“自动”执行此操作，而不是将标题元素的高度调整为与图像相同的像素高度？

我试过 height:auto 但这只会带来意想不到的不稳定结果。

代码如下:

<header>
  <img src="images/logosketch.jpg" alt="companylogo" />
  <div class="search">
    <p>SEARCH HERE</p>
  </div>
</header>

header { position: relative; }
.search { bottom: 0; position: absolute; right: 0; }
.search p { margin: 0; }

有什么建议吗？

Answer 1

尝试以下 -

header { position: relative; padding: 0; margin: 0;}

header img {
    display: block;
    height: 100px;
}

用这个方法，将图片做成 block 元素，手动设置它的高度，会导致父 block 元素调整它的大小。但是，如果该 header 中的任何其他 block 元素的高度大于 img 元素，则会导致 header 采用该其他元素的高度，但绝对位置的 block 元素除外。

希望这对您有所帮助。