Question

我对图像和部分有一种奇怪的情况。您可以从我的github

下载html，css和img1

情况：我有一个带有填充的节标记：从各方面15px。在这部分我有一个img，向左浮动，然后是一个p和一个带有两个按钮的跨度。该部分还有一个边界和边距：35px
我的问题：图像不尊重部分的底部填充，并穿过部分底部边框我试图将img放在该部分内的div中，并且还试图给出该部分的高度值和100％的图像高度，但它没有改变任何内容

这个问题的最佳解决方案是什么，以便图片占据该部分的顶部，左侧和底部填充区域的所有高度？

在github中，退一步，是一个ppt文件TASKS.ppt。第三张幻灯片是我试图实现的。编辑：因为请求代码，这里是： HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Music categories</title>
    <link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>Music Categories</h1>
    </header>
    <section>
        <img src="img1.png" />
        <div>
            <p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
            <span>
                <input type="button" value="Listen" />
                <input type="button" value="Add" />
            </span>
        </div>

    </section>
</body>
</html>

CSS：

body {
    background-color: #EEE;
    padding-top: 14px;
    padding-left: 12px;
    padding-right: 8px;
    padding-bottom: 25px;
}

    body header h1 {
        font-weight: lighter;
        font-size: 1.5em;
        font-family: Arial;
        letter-spacing: -2px;
    }

section {
    border-style: solid;
    border-color: #989898;
    border-width: 2px;
    padding: 15px;
    margin: 35px 0px;
}

    section img {
        float: left;
    }

        section img:after {
            clear: both;
        }

图片img1.png

Answer 1

这是一个经典的搜索clearfix。一种可能的解决方案是

section {
    overflow: hidden;
}

请参阅JSFiddle

更新

CSS-Tricks - All About Floats上有一篇关于CSS float和clear的文章。

基本上，你需要clear，

元素应该位于浮动元素

和一些clearfix，何时

浮动元素的父级折叠，您希望父级环绕/包含浮动子级

您还可以查看Stackoverflow css-float tag wiki（别名为css-clear）或clearfix

为什么我的图像不尊重其父级（部分）填充

1 个答案: