Css 嵌套DIV元素_Css_Xhtml_Html - Fatal编程技术网

Css 嵌套DIV元素

css html

Css 嵌套DIV元素,css,xhtml,html,Css,Xhtml,Html,我试图将两个DIV元素inner-1和inner-2（红色虚线边框）封装在包装DIV（绿色实线边框）中，但包装DIV元素不会扩展以封装内部DIV 我做错了什么 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

我试图将两个DIV元素inner-1和inner-2（红色虚线边框）封装在包装DIV（绿色实线边框）中，但包装DIV元素不会扩展以封装内部DIV

我做错了什么

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
</div>
</body>
</html>


嵌套div
“包装器”div中的内容
内容

内部

内-1分区
内-2分区内的内容

。
.
.
内-2分区内的内容


.
.
.

试试看

您可以设置

的边距，使其几乎不可见。

由于您同时浮动

#inner-1

和

#inner-2

，因此需要一个。基本上，在父级（

#wrapper

）上设置

溢出：auto

应该可以解决问题。

正是浮动给了你问题。这可能适合您：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>

<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;"> 
  content inside "wrapper" div
  <div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
    content <br />
    inside <br />
    inner-1 div
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
  <div style="clear: both"></div>
</div>
</body>
</html>


嵌套div
“包装器”div中的内容
内容

内部

内-1分区
内-2分区内的内容

在包含div的底部添加了“div style=“clear:both”>。

可能还需要注意的是，有几种不同的“清除浮动”方法。这对我来说非常有效，只需要向父元素添加一个类：

.clearfix:after{content:"\0020";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}

如前所述，您需要一些方法来强制包含div，以实现浮动div占用了空间。通常被称为清除浮动，在互联网上有很多关于这个话题的讨论

在pathf.com上，这是一种更受欢迎的使用方式。阅读本文时，请务必阅读所有注释。

设置“宽度：100%”和“溢出：隐藏”也适用于父元素除了使用Javascript真的没有其他解决方案吗？我也有同样的问题，外部div没有实线宽度，但是使用Javascript似乎是一个解决办法

.clearfix:after{content:"\0020";display:block;height:0;clear:both;
 visibility:hidden;overflow:hidden;}