根据内部内容自动调整div [英] Auto adjusting div based on inside content

问题描述

所以我试图根据内部内容的高度自动调整divs的高度.这是我目前的工作:

 < div id ="content">< div id ="item"></div>< div id ="item"></div>< div id ="item"></div>< div id ="item"></div>< div id ="item"></div>< div id ="item"></div>< div id ="item"></div></div>#内容 {保证金:0px自动;边距顶部:10像素;边框:1px实线；宽度:920px；}#物品 {显示:块；宽度:220像素；高度:250像素；边框:1px实线；左边距:6px;底边距:5px;向左飘浮;} 

我发现，当我不将'float:left'应用于有效的'item'div时，但是当我应用float:left时，高度不会根据内部内容进行设置.关于如何解决此问题的任何想法?

解决方案

将 overflow:hidden; 应用于 #content 或清除浮动内容.

您使用的每个ID在文档中也必须是唯一的.像您在此处那样使用ID不好，

< div id ="item"></div> 

将 class 属性用于此类操作.

演示有溢出: http://jsfiddle.net/9WSFf/1/

第二，您可以执行以下操作:

  #content:after{内容:"";清除:左；显示:块；} 

演示: http://jsfiddle.net/9WSFf/2/

so I am trying to make a divs height automatically adjust based on the height of the content inside it. This is my current work:

<div id="content">
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
</div>

#content {
margin: 0px auto;
margin-top: 10px;
border: 1px solid;
width: 920px;
}

#item {
display: block;
width: 220px;
height: 250px;
border: 1px solid;
margin-left: 6px;
margin-bottom: 5px;
float: left;
}

I have discovered that when I am NOT applying 'float: left' to the 'item' divs that it does work, however when I do apply float: left the height is not being set based on the content inside. Any idea on how to fix this?

解决方案

Apply overflow: hidden; to #content or clear the floating.

Also every id you use have to be unique in the document. It's not good to do use ID Like you did here:

<div id="item"></div>
<div id="item"></div>

Use the class attribute for such things.

Demo with overflow: http://jsfiddle.net/9WSFf/1/

Secondly, you could do something like this:

#content:after
{
    content:"";
    clear:left;
    display: block;
}

Demo:http://jsfiddle.net/9WSFf/2/

这篇关于根据内部内容自动调整div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！