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.

Output needed:

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

So far 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;
}

回答1:

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

HTML

<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;
}

Fiddle forked here : http://jsfiddle.net/f5h5vx06/

回答2:

I Hope this Code will Help You.

Here is Your 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>

回答3:

Remove the inline-block from the span and add width to 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

Updated:

Normally we group the elements which we have to float like below 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>

And here is the demo

But be sure to clear the floats like using overflow:hidden to parent element i.e. label.

回答4:

Set the icon width to a percentage, then also set the text to a percentage (adding upto 100% of course). And remove the line break. Fiddle Below

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;
}

回答5:

Alternative to float

I've encountered a lot of problems using float because it takes floated element out of the normal document flow. Thanks to the ideas provided in other answers here, I've managed to create this layout in the alternative way, without floating elements.

HTML (note how span tags are placed directly to each other on purpose):

<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;
}

Fiddle:

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

I recommend this technique if you want the parent element to properly respect the size of child elements.

Good luck!

来源：https://stackoverflow.com/questions/25763465/css-float-inline-blocks-around-single-block-element-on-more-than-one-line

标签

css

css-float