<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
我有一个输入字段和嵌套在一个 div 中的多个图像。在 div 上，我设置了背景颜色，但问题是背景颜色仅显示为第一个嵌套元素，即输入字段，而图像位于其下方的位置没有背景颜色。
您可以在这里查看:http://kbanda2.rochestercs.org/abc/home.html , 用户名&密码=k
早些时候，我为 div 设置了固定高度，这解决了这个问题，但我不想使用固定高度，以防之后添加更多元素。
如果需要，您可以查看页面源代码或检查元素。
实际代码:
<div id="wrapper">
<input type="text" id="tfq" class="tftextinput2" name="q" size="30" maxlength="120" value="Enter cuisine type" />
<input type="submit" value="Go" onclick="pop()" class="tfbutton2" />
<br/>
<ul id="da-thumbs" class="da-thumbs">
<!--restaurants will be appended into here through a script-->
</ul>
</div>
CSS:
.da-thumbs li {
list-style-type: none;
float: left;
margin: 5px;
background: #fff;
padding: 8px;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
left:10px;
}
.da-thumbs li a, .da-thumbs li a img {
display: block;
position: relative;
color:white;
padding:5;
}
.da-thumbs li a {
overflow: hidden;
}
.da-thumbs li a div {
position: absolute;
background: rgba(75, 75, 75, 0.7);
width: 100%;
height: 100%;
}
.da-thumbs li a div {
//top: 0px;
bottom: -100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.da-thumbs li a:hover div {
bottom: 0px;
}
#wrapper {
max-width:940px;
margin:0 auto;
padding: 0 2%;
background:#dde0e1;
}
最佳答案
问题是因为列表中的 float 元素。 ul 中的所有 li 都有 float 。
解决方案是在包装器 div 上添加类 clearfix。 并添加以下 css。
CSS
.clearfix {
clear: both
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
HTML
<div id="wrapper" class="clearfix">
content here
</div>
关于div 的 CSS 背景色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27287353/