Question

我有3个div，我想以内联方式显示。

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

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

我似乎无法正确理解这一点。

同样正确的div似乎是分裂而不是保持内联，无论我做什么甚至消失。

所以预期的结果是：div 1＆amp; 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

。一个浮动左边，.with边距右（没有浮动）。三个绝对和没有浮动

.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

Answer 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

Answer 3

与法比奥相似的答案以display : table;为基础。

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

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

shrinked and not

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

设置3个div以与浮动内联显示

4 个答案: