Heim > Web-Frontend > HTML-Tutorial > CSS的疑惑_html/css_WEB-ITnose

CSS的疑惑_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:45:39
Original
1126 Leute haben es durchsucht

如下代码,A,B,C,D四个DIV,最后一个DIV为啥文字内容会分离,DIV D的边框会移动到第一行?

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>CSS</title></head><style type="text/css">    .A, .B, .C {        float: left;        width: 200px;        height: 100px;        margin: 1em;        border-style: solid;        border-width: 1px;        border-color: #ccc;    }    .D {        width: 200px;        height: 100px;        margin: 1em;        border-style: solid;        border-width: 1px;        border-color: #A94E38;    }</style><body><div class="A">Text in div A</div><div class="B">Text in div B</div><div class="C">Text in div C</div><div class="D">Text in div D</div></body></html>
Nach dem Login kopieren

运行效果

请求解惑,谢谢。


回复讨论(解决方案)


你这个是因为浮动元素对为未浮动元素(标准文档流)产生了影响,使用clear即可。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head> <style type="text/css">    .A, .B, .C {        float: left;        width: 100px;        height: 100px;                border: solid 2px blue;        background-color: green;    }     .D {        width: 200px;        height: 200px;        background-color: red;    }    /* 清除浮动元素对当前元素的影响 */    .clear {         clear: both;    }</style> <body><div class="A">Text in div A</div><div class="B">Text in div B</div><div class="C">Text in div C</div> <div class="D clear">Text in div D</div> </body></html>
Nach dem Login kopieren


谢谢,根据你的提示,找了篇博文,
http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html
正在努力理解中

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage