Question

我有一个输入字段和几个嵌在一个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;
}

Answer 1

问题是由于列表中的浮动元素。 ul 中的所有 li 都有浮动。

解决方案是在包装器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>

Answer 2

  <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">
     </ul>
     <div class="clearfix"></div>
    </div>

在css中

.clearfix
{
clear:both;
}

Answer 3

添加溢出：隐藏;用于包装

#wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 2%;
background: #dde0e1;
overflow: hidden;
}

div的CSS背景颜色

3 个答案: