Maison > interface Web > tutoriel HTML > le corps du texte

CSS的疑惑_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:45:39
original
1110 Les gens l'ont consulté

如下代码,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>
Copier après la connexion

运行效果

请求解惑,谢谢。


回复讨论(解决方案)


你这个是因为浮动元素对为未浮动元素(标准文档流)产生了影响,使用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>
Copier après la connexion


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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal