6

如何将两个元素保持在同一行并固定右列？我希望右 div 具有固定大小，左列流动，但是当在左列插入长文本时，右列进入下一列..

示例：http: //jsfiddle.net/Jbbxk/2/

有没有纯 CSS 解决方案？

注意！Wrap div 必须有动态宽度！ 出于演示目的，它具有固定的宽度，因此它会自动换行。

干杯!

4

5 回答 5

11

这是做你想做的事情的一种常见方式：

.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];
  • 固定右列放置在绝对位置top 0，right 0（它的正确位置）
  • 分配了wrap divposition: relative ，因此根据它确定右列位置。
于 2012-07-12T12:02:04.033 回答
8

它实际上比我想象的要容易，只需删除 float:left; 从左侧类中，并将您的右侧浮动项目放在 HTML 中它们上方

更新小提琴

于 2012-07-12T11:57:16.587 回答
1

这是另一个解决方案。放display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

此外，浮动 div 首先出现：

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>
于 2014-04-21T04:58:04.890 回答
0

你可以做

.left {
    max-width: 152px;
}
于 2012-07-12T11:39:50.687 回答
0

因为你有动态宽度，所以使用 % like

.left {
float: left;
background-color: #CCC;
width:75%;
}

我已经更新了小提琴链接：http: //jsfiddle.net/Jbbxk/6/

于 2012-07-12T11:46:04.813 回答