CSS - 家长div不充当父母

我目前正试图拿起CSS。目前为止还没有问题，但是我有一个问题，直到现在我还没有遇到问题。CSS - 家长div不充当父母

我有一个<div>包含另外两个<div>'s。我期望“父母”<div>充当父母（自动身高等），并实际“包含”两个孩子<div>的。

我的代码：

<div class="formpair"> 
    <div class="formlabel formitem"> 
     Parent Section: 
    </div> 
    <div class="formcontrol formitem"> 
     <select> 

     </select> 
    </div> 
</div>

我的CSS：

.formitem { 
    position: relative; 
    float: left; 
} 
.formlabel { 
    width: 200px; 
} 
.formcontrol { 
    position: absolute; 
    left: 200px; 
} 
.formpair { 
    clear: both; 
    margin-bottom: 4px; 
    height: auto; 
    position: relative; 
    display: block; 
}

我试图与 “位置” 和 “显示器”，但无济于事试验... 任何帮助表示赞赏！

来源

2014-12-18 Rhys

绝对位置导致这 – 2014-12-18 22:47:59

如果我是正确的绝对位置把它从流中。 – Rimble 2014-12-18 22:48:59

为了将来的参考，您还没有告诉我们问题是什么。 – TylerH 2014-12-18 22:51:54

除非有特别需要有子元素飘来，我已经提供使用display:inline-block不同的解决方案。我还清理了您的CSS，以删除稍后在文档中可能导致层次结构问题的一些不必要的膨胀。

你可以看到修复这里的工作示例：JSFiddle

这里是工作正常显示，你需要它的CSS：

.formitem { 
    display:inline-block; 
} 

.formlabel { 
    width: 200px; 
} 

.formpair { 
    margin-bottom: 4px; 
}

这里有几个问题你曾与你以前的CSS：

：

.formcontrol { 
    position: absolute; 
    left: 200px; 
}

这片CSS的正被反驳

.formitem { 
    position: relative; 
    float: left; 
}

所以.formcontrol对您的文档没有任何影响，因为反CSS。它被反驳的原因是因为CSS是线性的，并从头到尾读取您的文档。在你的HTML你先告诉CSS应用.formcontrol，然后你马上给它的第二类.formitem后：

<div class="formcontrol formitem">

其他CSS声明，如：

height: auto; 
position: relative; 
display: block;

在需要

似乎没有你例如，由于默认设置对于此应用程序来说工作得很好，并且可能会限制元素的声明，这可能会导致未来CSS修改时出现问题。

如果你的目的是使用float:left，然后@rdubya评论对如何正确clearfix下方浮动元素此链接：clearfix

来源

2014-12-18 23:28:24 draason

父容器不会展开到浮动子元素的高度。这样做最简单的方法是添加一个清除div来清除浮动div并让父级展开。

HTML

<div class="formpair"> 
    <div class="formlabel formitem"> 
     Parent Section: 
    </div> 
    <div class="formcontrol formitem"> 
     <select> 

     </select> 
    </div> 
    <div class="clear"></div> 
</div>

CSS添加...

.clear { 
    clear: both; 
}

http://codepen.io/anon/pen/ByzJbY

来源

2014-12-18 23:16:28 Stef

现代潮流清除浮动是在div容器使用伪元素：

这样你减少标记的获得clearfix，结果

.container:after { 
     content:''; 
     display:table; 
     clear: both; 
    }

此外，优化这种技术你得到Nicolas Gallagher's micro-clearfix-hack

在这个版本中，你还会发现一个:before伪元素，以避免折叠的顶部边距。

这是主流最流行的解决方案！

来源

2014-12-18 23:38:12 maioman

CSS - 家长div不充当父母

回答

相关问题