CSS：在多个行上浮动单块元素周围的内联块 [英] CSS: Float inline-blocks around single block element on more than one line

问题描述

我需要的是将两个红色元素浮动在绿色元素的一侧，直接一个堆叠在另一个之上，使得外侧块将遵循绿色+最长的红色的总宽度。

What I need is to float both red elements on the side of the green one, stacked directly one above the other, in such a manner that the outer block will respect the total width of green + longest red.

需要输出：

这里是小提琴： http ：//jsfiddle.net/r71bapbn/1/

Here is the fiddle: http://jsfiddle.net/r71bapbn/1/

到目前为止HTML：

<div>
    <label>
        <span class="icon"></span>
        <span class="text1">Some text</span><br />
        <span class="text2">Some other text</span>
    </label>
</div>

CSS：

div {
    display:inline-block;
}
label {
    display:inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
}
span {
    display:inline-block;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}

推荐答案

• 删除< br>


• 添加 overflow：auto


• 删除 white-space：nowrap


• 添加到 .text1 < .icon $ 和 .text2 a code>的宽度


• Remove <br>
• Add overflow: auto
• Remove white-space: nowrap
• Add to .text1 and .text2 a margin-left of the .icon's width

HTML b

<div>
    <label>
        <span class="icon"></span>
        <span class="text1">Some text</span>
        <span class="text2">Some other text</span>
    </label>
</div>

CSS

label {
    display: inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
    overflow: auto;
}
span {
    display:block;
    background:rgba(255, 200, 200, 1);
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1, .text2 {
    margin-left: 40px;
}

这里提供的小提示： http://jsfiddle.net/f5h5vx06/

这篇关于CSS：在多个行上浮动单块元素周围的内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！