我有一张图片和一段奇怪的情况。您可以从我的github下载html,css和img1

情况:我有一个section标签,从各个方面都有padding: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

最佳答案

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

section {
    overflow: hidden;
}


JSFiddle

更新:

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

本质上,您需要clear


元素应保持在浮动元素下方


和一些clearfix,当


浮动元素的父级折叠,并且您希望父级环绕/包括浮动子级


您还可以查看Stackoverflow css-float tag wikicss-clear的别名)或clearfix

10-05 21:04
查看更多