> 웹 프론트엔드 > HTML 튜토리얼 > css问题,请懂得帮忙看下,非常感谢。_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:20:21
원래의
1001명이 탐색했습니다.

问题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就可以了

把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;

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿