css问题，请懂得帮忙看下，非常感谢。_html/css

css问题，请懂得帮忙看下，非常感谢。_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:20:21

原创

1000 人浏览过

问题1：

<style>    .a{        background-color: #1c94c4;    }    .b dd{        float: left; <!--当我使用float:left后，div.a的颜色蓝色【 background-color: #1c94c4;】就不显示了，有没有办法让他填充b的区域，我想到的是对a使用absolute，但是这样写导致c的内容无法显示，要使用padding-top:100px这样才能显示，我觉得很不合理。请问有什么好的解决方法吗？ -->    }    .c{        clear: both;    }</style><div class="a">    <dl class="b">        <dd>a</dd>        <dd>b</dd>        <dd>c</dd>        <dd>d</dd>    </dl></div><div class="c">    123</div>

登录后复制

回复讨论(解决方案)

把dd的标签换成dt就可以了

你好，我的意思是，使用position：absolute后，如何让下面的div不要被它覆盖，继续以相对布局的方式显示。

你说的我没太明白，这样好像也没覆盖

你好。这样就覆盖了。添加a的position:absolute ，我希望c显示，但是除了padding-top:100之外还有没有其他方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><style>    .a{        position: absolute;        background-color: #1c94c4;    }    .b dt{        float: left;    }    .c{    }</style><div class="a">    <dl class="b">        <dt>a</dt>        <dt>b</dt>        <dt>c</dt>        <dt>d</dt>    </dl></div><div class="c">    123</div></body></html>

登录后复制

把c也定义一个position就可以显示了，只是显示的位置不在下面，padding-top其实已经可以了，不知道你的需求是什么

那是因为，class为a的div没被撑起来，这样就可以解决
.a {
background-color: #1c94c4;
over-flow:hidden;/*针对子元素float，父元素未设置宽高*/
}

不知道这是不是你想要的结果：

<style>    .a{        background-color: #1c94c4;    }    .b dd{        display: inline-block;    }</style><div class="a">    <dl class="b">        <dd>a</dd>        <dd>b</dd>        <dd>c</dd>        <dd>d</dd>    </dl></div><div class="c">    123</div>

登录后复制

因为你的div没设置宽高，当他里面的元素浮起来后，她的高就为0。所以不显示，有三种解决办法。
1：给该div设定高度。
2：在该div下添加一个子元素，用clear:both
3：设置该div的overflow:hidden;

谢谢各位朋友，大家的回复都很有帮助，谢谢。