Question

我几乎没有写任何HTML / CSS，而且我已经遇到了问题。我的标题元素不会自动扩展它的高度来包装它的子元素。我已经做了很多研究，并在开发人员工具中愚弄了，但似乎无法指责它。我确定这很简单，但是我在这里忽略了什么？

<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
    header {
        width: 96%;
        height: auto;
        position: relative;
        margin: 1em auto;
        border: 1px solid gray;
        border-radius: 5px;
        padding: 1em;
        }
    section {
        width: 96%;
        position: relative;
        margin: 1em auto;
        border: 1px solid gray;
        border-radius: 5px;
        padding: 1em;
        }
    footer {
        width: 96%;
        position: relative;
        margin: 1em auto;
        border: 1px solid gray;
        border-radius: 5px;
        padding: 1em;
        }
    h1 {
        font-size: 2em;
        margin: 1em auto;
        }
    img {
        max-width: 100%;
        /* This tells the browser to set the image to the full-width of it's containing element. */
        }
    .group-icon {
        width: 10%;
        position: relative;
        float: left;
        margin: 0 1% 0 0;
        }
    .group-name {
        position: relative;
        float: left;
        }
</style>
</head>
<body>
<header>
    <div class="group-icon">
        <img src="images/sailing-icon.png">
    </div>
    <div class="group-name">
        <h1>Pirates in the Bay</h1>
    </div>
</header>
<section>
    <h2>TEST</h2>
</section>
<section>
    <h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>

Answer 1

这是因为你在标题（group-name和group-icon）中浮动了元素。

尝试将overflow: hidden添加到header样式。意志有效地“清除”浮动元素。

请参阅此处的演示。

http://jsbin.com/EPelEMA/1/edit

有关溢出属性的更多信息，请访问：http://css-tricks.com/the-css-overflow-property/

不调整大小以适应图像

1 个答案: