Html 将3个div设置为与浮点一起内联显示

我有3个div要内联显示

屏幕上最左侧的2个div和最右侧的1个div

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

我似乎不能正确地理解这一点

另外，右div似乎正在分裂，无论我做什么，都不会保持在线，甚至消失

所以预期的结果是：当屏幕宽度改变时，div 1和div 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>

这是我的JSFIDLE：

谢谢

试试这个：

.main {
    display:table;
    width:100%;
}
.this-image, .that-image {
    width: 16px;
}
.title, .name {
    display: block;
}
.one, .two, .three {
    display:table-cell;
    width:30%;
    margin:0 1%;
}
.one {
    background-color: red;
}
.two {
    background-color: green;
    margin-left: 15px;
}
.three {
    background-color: blue;
}

---

与Fabio的答案相似，显示为

表格作为基础

区别在于在第二个和第三个单元格之间留一个间隙，直到有足够的内容来填充它


.main {
    display: table;
    width:100%;
    overflow:hidden;
}
.this-image, .that-image {
    width: 16px;
}
.title, .name {
    display: block;
}
.one, .two, .three {
    display:table-cell;
    vertical-align:middle;
}
.one {
    background-color: red;
}
.two {
    background-color: green;
    display:inline-table;
}
.two:after {/* here is the faux-columns revisited to draw your background if needed */
    content:'';
    display:block;
    height:1000px;
    margin-bottom:-1000px;
    background:green;
}
.three {
    background-color: blue;
}

。一个带左浮动，一个带右边距（无浮动）。三个带绝对和无浮动

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

我自己找到了问题的答案，但@Barak你的答案几乎完美无瑕，所以我会保持你的答案正确无误

这是我的JSFIDLE：

这是我的CSS：

.main {
    display: flex;
}

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

.title, .name {
    display: block;
}

.one {
    background-color: red;
    float:left;
}

.two {
    background-color: green;
    margin-left: 30px;
    padding-right: 60px;
    float: left;
    width: 100%;
}

.three {
    background-color: blue;
    float:left;
    width: 50px;
}

检查这个，让我知道这是否是你正在寻找的。这是你想要的吗？？？@hex4949几乎，如果你增加名称div中的文本，整个div就会下降，我正在使用一个可变的屏幕大小（宽度：320-960）名字可以很大，哪一个差不多？？？文本必须在图像右侧15px，并且在点击正确的div时用包装覆盖所有宽度，所以这不是我所需要的，但是谢谢：）我想避免使用percentages@Eugene，你能给我们展示一下这两种情况下的预期行为吗？短和长。两个？谢谢，有一点是，当屏幕非常小时，文本在图像下方的左侧环绕，应该很容易修复：）
.main {
    display: flex;
}

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

.title, .name {
    display: block;
}

.one {
    background-color: red;
    float:left;
}

.two {
    background-color: green;
    margin-left: 30px;
    padding-right: 60px;
    float: left;
    width: 100%;
}

.three {
    background-color: blue;
    float:left;
    width: 50px;
}