设置 3 个 div 以与浮点数内联显示答案

【问题标题】：Setting 3 divs to display inline with floats设置 3 个 div 以与浮点数内联显示
【发布时间】：2014-08-21 16:16:33
【问题描述】：

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

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

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

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

无论我做什么甚至消失，右 div 似乎都在分裂并且不会保持内联。

所以预期的结果是：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/

谢谢

【问题讨论】：

查看此jsFiddle 并告诉我您是否正在寻找它。
这是fiddle你想要的吗？？
@hex494D49 几乎，如果你增加名称 div 中的文本，整个 div 就会下降，我正在使用可变屏幕尺寸（宽度：320 - 960）并且名称可能非常大
哪个差不多？？？

标签： html css

【解决方案1】：

.one 向左浮动，.with margin-right（无浮动）.three 绝对且无浮动

.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

【讨论】：

谢谢，一件事是当屏幕真的很小时，文字会在图像下方的左侧换行，应该很容易解决:)

【解决方案2】：

试试这个：

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

see fiddle here

【讨论】：

文本必须在图像右侧 15px 并且在点击右 div 时跨越所有宽度并换行，所以这不是我所需要的，但谢谢 :) 我想避免使用百分比
@Eugene，你能给我们看一下这两种情况下预期的行为吗？短和长.two ?

【解决方案3】：

与以display : table; 为基础的 Fabio 类似的答案。

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

DEMO

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

【讨论】：

【解决方案4】：

自己找到了我自己的问题的解决方案，但是@Barak 你的答案几乎是完美的，所以我会保持你的答案是正确的。

这是我的 jsfiddle：http://jsfiddle.net/r679f840/8/

这是我的 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;
}

【讨论】：