我有一张图片和一段奇怪的情况。您可以从我的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
float
和clear
的文章。本质上,您需要
clear
元素应保持在浮动元素下方
和一些clearfix,当
浮动元素的父级折叠,并且您希望父级环绕/包括浮动子级
您还可以查看Stackoverflow css-float tag wiki(css-clear的别名)或clearfix