包装尺寸反映其内容 [英] Wrappers size reflecting its contents

问题描述

查看这个小提琴。

我很困惑为什么 #wrapper 不扩展以容纳其中的div。这里缺少什么？

作为一个方面，任何想法为什么我的< hr> 正确显示？

解决方案

包装器不会展开，因为里面的项目是浮动的， 。

您可以通过在封装的末尾添加一个块级元素并告知它清除所有浮点数，让包装器扩展到浮动元素之外：

  #wrapper：after {
 content：。; 
 display：block; 
 clear：both; 
 visibility：hidden; 
} 
  

此外，包装器的高度设置为100px。

以下是您的小提琴的更新版本： http：// jsfiddle。 net / kWJ79 / 9 /

至于你的 hr ，你究竟要做什么？看起来你想要在2个div之间创建一个垂直的条。这是否正确？

UPDATE

如果您要创建

我要做的是将左div放在自己的容器中，该容器有一个右边填充，边距和边界。这种方式你没有一个冗余的div浮动在你的代码和recudes需要使用一个小时。

这是一个更新的小提琴与这个例子： http://jsfiddle.net/kWJ79/15/

  #left_wrapper {
 margin-right：5px; 
 padding-right：5px; 
 border-right：1px solid red; 
 float：left; 
} 
  

请注意，我已删除 float：left ; #left div中的，并将其放在 #left_wrapper p>


Take a look at this Fiddle.

I'm puzzled as to why #wrapper doesn't expand to accommodate the divs inside it. What's missing here?

As a side note, any idea as to why my <hr> isn't displaying properly?

解决方案

The wrapper doesn't expand because the items inside are floating and taken out of the natural flow of the document.

You can tell the wrapper to expand past the floating elements by adding a block level element to the end of the wrapper and telling it to clear all floats:

#wrapper:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
}

Also, you had the height of the wrapper set to 100px.

Here's an updated version of your fiddle: http://jsfiddle.net/kWJ79/9/

As for your hr, what exactly are you wanting to do? It looks like you're wanting to create a vertical bar between the 2 divs. Is this correct?

UPDATE

If you're wanting to create a line between the left and right divs I'd consider a slightly different route.

What I'd do is put the left div inside its own container which has a right padding, margin and border. This way you don't have a redundant div floating around in your code and recudes the need to use a hr.

Here's an updated fiddle with this example: http://jsfiddle.net/kWJ79/15/

#left_wrapper{
    margin-right:5px;
    padding-right: 5px;
    border-right:1px solid red;
    float:left;
}

Notice that I've removed the float:left; from the #left div and placed it on the #left_wrapper instead.

这篇关于包装尺寸反映其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！