Question

这应该很容易......为什么这不容易？

我希望并排有2个div，其中一个div会自动调整内容的大小，而第二个div只会填充剩余的宽度。如果它太大，我需要将'剩余宽度'div中的文本截断，因为我只能让这些div占用一行。

我一整天都在搜索，我找到的最近的帖子是this，建议使用STILL无法解决问题的表格。

以下是重现我的问题的jsfiddle代码：http://jsfiddle.net/ssawchenko/gMxWc/

我希望你们其中一个人可以帮助我！

=== CSS（Hacky）解决方案？ ===

显然添加负边距（必须保证足够大以覆盖正确的尺寸）才会“正常”。这看起来很hacky，而且可能没有完全解决问题。如果我将jsfiddle窗口左右拖动以缩小和增长div，则会出现一些奇怪的现象，收缩文本似乎不会浮动在完整的右侧。

.right_part 
{
  margin-left:-1000px; 
  background:yellow;   
  float:right;
  white-space:nowrap;
}

===完整的CSS解决方案===

最终找到了合适的CSS组合！

http://jsfiddle.net/ssawchenko/gKnuY/

我的错误是我错误地浮动了我的“适合”内容。通过将div移动到DOM中的正确位置，内容将正确浮动，“剩余大小”div现在将正确占用剩余空间。

我还想强制div占用一行，这就是为什么我在“剩余大小”div内容上设置了如此严格的CSS。溢出：隐藏; 文本溢出：省略号;

Answer 1

#full_width_div {
    background-color:#5B8587;
    width:100%;
}
.left_part {
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.right_part {
   background:yellow;   
   float:right;
   white-space:nowrap;
}

<div id="full_width_div">
  <div class="right_part">
     Size to fit me completely
  </div>
  <div class="left_part">
     I am long and should be truncated once I meet up with the size to me text.
  </div>    

  <div style="clear:both;" />
</div>

我的错误是我错误地浮动了我的“适合”内容。通过将div移动到DOM中的正确位置，内容将正确浮动，“剩余大小”div现在将正确占用剩余空间。

我还想强制div占用一行，这就是为什么我在“剩余大小”div内容上设置了如此严格的CSS。溢出：隐藏;文本溢出：省略号;

Answer 2

这应该适合你的伙伴。

<html>
<head>
<style>
#full_width_div, #full_width_div table {
    background-color:#5B8587;
    width:100%;
    max-height: 20px;
    overflow: hidden;
}

.left_part {
    background:red;
    width: 100%;
    overflow:hidden;
}
.right_part {
   background:yellow;  
   white-space:nowrap;
   verticle-align: top;
}
</style>
</head>
<body>
<div id="full_width_div">
    <table>
        <tr>
            <td class="left_part" valign="top">I am long and should be truncated once I meet up with the size to me text.</td>
            <td class="right_part" valign="top">Size to fit me completely</td>
        </tr>
    </table>
</div>
</body>
</html>

你工作的jsfiddle - ＆gt; http://jsfiddle.net/gMxWc/68/

Answer 3

你可以像这样使用jQuery和代码：

$(document).ready(function() {
    redraw();
});

$(window).resize(function() {
    redraw();
});

function redraw()
{
    var full_width = $('body').width();
    var left_width = $('.left_part').width();
    $('.right_part').width(full_width - left_width );
}

http://jsfiddle.net/gMxWc/62/ - 这是工作示例

如何并排放置两个div，其中一个尺寸合适，另一个占用剩余空间？

3 个答案: