相关疑难解决方法(0)

我正在尝试制作一个DIV,它几乎是一个带有左边对齐图像和文本位于图像右侧的边框.以下是我设置的方法:

    <div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
        <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
        Here is some text.
    </div>

问题在于,如果图像高于文本,则周围的DIV(以及边界)将自身调整为适合所有文本所需的高度,但图像溢出DIV.

如何使DIV更改其高度以适合较高者(图像或文本),以便两者都适合边框？

谢谢.

我试图了解CSS W3C规范部分原因:

为什么漂浮元素的父母会"崩溃"？

我发现这对很多人试图学习CSS布局技术来说是一个痛点.能够解释为什么这部分标准是以这种方式设置的,这将是有帮助的.一个合理的用例,也许吧？

注意:我不是问如何处理这种行为 - 这里已经完全涵盖了这一点: 你如何让浮动元素的父母不会崩溃？.

我很困惑 我希望2个div的内容根据子div的大小动态扩展其父div的高度；最高为600像素-但它们只是重叠而没有增加尺寸。有人介意提供一些见识吗？显然我在这里缺少什么。

这是正在发生的事情：

http://puu.sh/2Vexi.png

这是我的html：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum. 
        </div>
        <div class="pBoxRightColumn">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
        </div>
    </div>
</div>

这是我的CSS：

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #eee;
    border-radius: 4px;
    max-height: 600px;
}

.pictureBox {
    border: 1px solid #ee5;
    width:100%;
}

.testp {
    padding: 10px;
}

.pBoxLeftColumn {
    display: block;
    float: …

我的CSS问题.我的屏幕上有一个区域,里面有按钮.按钮的数量是可变的.这些按钮包含在DIV(sbr_btn)内.像这样的东西:

Outer DIV Outer DIV Outer DIV

 01  02  03  04  05
 06  07  08  ...
 71  72  73  74  75

Outer DIV Outer DIV Outer DIV

问题是因为我的按钮有浮动:左边然后外面的DIV没有包围按钮.它只是忽略了所有按钮的高度,看起来不像上面那样.有什么办法可以让外面的DIV包围浮动按钮吗？

<div id="sbr_btn" >
        <div><a href='xx'>01</a></div>
        <div><a href='xx'>02</a></div>
        <div><a href='xx'>03</a></div>
        <div><a href='xx'>04</a></div>
        <div><a href='xx'>05</a></div>
        <div><a href='xx'>06</a></div>
        many more
        <div><a href='xx'>75</a></div>
</div>


#sbr_btn div {
    float: left;
    padding: 4px;
    text-align: center;
}
#sbr_btn div a {
    display: inline-block;
    padding: 1px 4px;
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    color: #111111;
}

如果我有以下代码：

<div>
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

父级将折叠，并且看起来高度为0px。

因此，我猜这是一个已知问题，并且有可用的修复程序，但是我真的很想知道为什么它首先发生。

有人可以解释吗？

我不需要任何CSS修复程序，这里已经介绍了它们，我想解释一下为什么会首先发生这种情况。

我创建了一些<div>标签,并将其设置为包含两个<div>浮动到两侧的标签<div>.
我注意到当我尝试设置背景颜色时,包含<div>没有正确地包裹<div>它应该包含的s.我想知道为什么会这样.

我在这里看到了类似的问题为什么这些Div标签没有正确嵌套？但没有人解释为什么在任何答案中都会发生这种情况.

这是我的源代码，有什么问题吗？

CSS：

 .no1.right {text-align: right;float : right}
 .no1.left {text-align : left;float : left}
 .no1 {background-color: blue}

HTML：

<div class="no1">
    <div class="right">a</div>
    <div class="left">b</div>
</div>

为什么background-color不工作？