将浮点数保持在同一行上
将浮点数保持在同一行上
提问于 2012-07-12 11:35:36
如何使用固定的右列将两个元素保留在同一行中？我想右div是固定大小的，左列流体，但当在插入长文本左一，然后右一去下一列.
示例：http://jsfiddle.net/Jbbxk/2/
是否有任何纯CSS解决方案？
NB！包装div必须具有动态宽度！用于演示，它已经固定了witdh，所以它会包装。
干杯!
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-07-12 12:02:04
这是一种常见的做你想做的事情的方式：
.wrap {
position: relative;
margin: 5px;
border: 1px solid red;
}
.left {
float: left;
background-color: #CCC;
margin-right: 48px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: #888;
}解释：
- 流体左列填充整个宽度，但使用
margin-right: [right column width];为右列节省空间。 - 固定的右列放置在顶部0的绝对位置，右0(其正确位置)。
- 包装div被指定为
position: relative，因此根据它确定正确的列位置。
Stack Overflow用户
发布于 2012-07-12 11:57:16
它实际上比我想象的更容易，只需从左侧类中移除float:左侧；并将您的右浮动项放在HTML中它们的上方。
update fiddle
Stack Overflow用户
发布于 2014-04-21 04:58:04
这是另一个解决办法。设置display: table-cell;
http://jsfiddle.net/Jbbxk/54/
.left {
/*display: left;*/
display: table-cell;
}
.right {
float: right;
display: table-cell;
}此外，浮动div放在第一位：
<div class="right">
</div>
<div class="left">
Looooooooong content - pushes right to next row<br>
NOT OK
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11450962
复制相关文章
相似问题
腾讯云开发者
