html - 设置 3 个 div 以内联显示 float

Question

我有 3 个要内嵌显示的 div。

屏幕最左侧 2 个 div，最右侧 1 个 div。

当屏幕缩小或名称大小增加时，我希望所有元素仍然保持内联，并且名称在新行上换行(如果它击中了正确的 div)。正确的 div 必须始终在右侧。除了图像，我想避免使用设置的宽度/高度。

我似乎无法正确地做到这一点。

此外，无论我做什么甚至消失，右侧的 div 似乎都在 split 并且不会保持内联。

所以预期的结果是:div 1 和 2 总是在左边，div 3 总是在右边，当屏幕宽度改变时所有三个总是内联

这是我的 html:

<div class="main">
    <div class="one">
        <img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="image">
    </div>
    <div class="two">
        <span class="name">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
        <span class="title">Title</span>
    </div>
    <div class="three">
        <div class="this">
            <img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="this-image">
            <span class="this-num">12</span>
        </div>
        <div class="that">
            <img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="that-image">
            <span class="that-num">21</span>
        </div>
    </div>
</div>

这是我的CSS:

.main {
    display: -webkit-inline-box;
}

.this-image, .that-image {
    width: 16px;
}

.title, .name {
    display: block;
}

.three {
    float:right;
    position: fixed;
}

.one {
    background-color: red;
}

.two {
    background-color: green;
    margin-left: 15px;
}

.three {
    background-color: blue;

}

这是我的 jsfiddle:

http://jsfiddle.net/r679f840/1/

谢谢

Answer 1

.一个左边 float ，.右边边距(没有 float ).三个绝对没有 float

.main {
    position: relative;
}

.one {
    background-color: red;
    float:left;
    margin-right:15px;
    margin-bottom:15px;    
}

.two {
    background-color: green;
    margin-right: 46px;
 }

.three {
    background-color: blue;
    position: absolute;
    right: 10px;
    top: 0;
 }

see fiddle here