CSS：在多行上单个块元素周围浮动内联块

Question

我需要的是将两个红色元素浮动在绿色的一侧，直接一个堆叠在另一个上面，这样外部块将尊重绿色+最长红色的总宽度。

需要输出：

这是小提琴： 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;
}

Answer 1

• 删除<br>
• 添加overflow: auto
• 删除white-space: nowrap
• 添加.text1和.text2 margin-left的{​​{1}}宽度

<强> HTML

.icon

<强> CSS

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

小提琴在这里分叉：http://jsfiddle.net/f5h5vx06/

Answer 2

从span中删除内联块并将宽度添加到label：

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

}
.text2 {

}

demo

---

<强>更新

通常我们将我们必须浮动的元素分组，如下面的html：

<div>
    <label>
        <span class="icon"></span><!--this would be floated-->
        <spa class="group"><!--this would be floated-->
        <span class="text1">Some text</span><br />
        <span class="text2">Some other text</span>
        </span>
    </label>
</div>

这是demo

但请务必清除浮点数，例如使用overflow:hidden作为父元素，即标签。

Answer 3

我希望此代码能为您提供帮助。

这是您的DEMO

<强> CSS

div {
    display:inline-block;
    width: 100%;
}
label {
    display:inline-block;
    background:rgba(230, 230, 255, 1);
    padding:10px;
    width: 140px;
}
span {
    display:flex;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
    margin-bottom: 3px;
}
.icon {
    display:block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1 {
width: 65px;    
}
.text2 {

}

<强> HTML

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

Answer 4

将图标宽度设置为百分比，然后还将文本设置为百分比（当然最多可添加100％）。并删除换行符。小提琴下面

http://jsfiddle.net/q35wffht/

HTML;

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

的CSS;

    div {
    display:inline-block;
}
.left {
    width: 40px;
    float: left;
}
.right {
    width: auto;
    float: left;
}
span {
    display:inline-block;
    background:rgba(255, 200, 200, 1);
    white-space:nowrap;
}
.icon {
    display:block;
    width:100%;
    height:50px;
    background:rgba(200, 255, 200, 1);
    float:left;
}
.text1 {
float: left;
    max-width: 100%;
    width: auto;
}
.text2 {
   float: left;
    max-width: 100%;
    width: auto;
}

Answer 5

浮动

的替代方案

我使用float遇到了很多问题，因为它将浮动元素从正常文档流中取出。感谢此处其他答案中提供的想法，我设法以另一种方式创建此布局，没有浮动元素。

HTML （请注意span标记是如何直接相互放置的）：

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

<强> CSS ：

div {
    display:inline-block;
}
label {
    display:block;
    white-space:nowrap;
    background:rgba(230, 230, 255, 1);
    padding:10px;
}
.icon {
    vertical-align:top;
    display: inline-block;
    width:40px;
    height:50px;
    background:rgba(200, 255, 200, 1);
}
.group{
    border:1px solid red;
}
.icon, .group{
    vertical-align: top;
    display: inline-block;    
}
.text1, .text2 {
   background:rgba(255, 200, 200, 1);
   display:block;
}

小提琴：

http://jsfiddle.net/r71bapbn/21/

如果您希望父元素正确地尊重子元素的大小，我建议使用此技术。

祝你好运！