如何将两个div并排放置,其中一个大小合适,另一个占用剩余空间?[英] How to place two divs side by side where one sized to fit and other takes up remaining space?

本文是小编为大家收集整理的关于如何将两个div并排放置,其中一个大小合适,另一个占用剩余空间?的处理方法,想解了如何将两个div并排放置,其中一个大小合适,另一个占用剩余空间?的问题怎么解决?如何将两个div并排放置,其中一个大小合适,另一个占用剩余空间?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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

我希望并排有2个Divs,其中一个Div将自动对内部内容自动大小,而第二个DIV只会填充剩余的宽度.我需要"剩余宽度" div中的文本,如果它太大的话,它才会被截断,因为我只能让这些div占据一行.

我整天都在搜索,我发现最接近的是 this 帖子建议使用仍然没有解决问题的表.

这是重现我的问题的JSFIDDLE代码:

我希望你们中的一个堆栈可以帮助我!

=== css(hacky)解决方案? ===

显然增加了负距离(必须保证足够大以覆盖合适的尺寸)将"工作".这似乎是如此的骇客, May 却不能完全解决问题.如果我将JSFIDDLE窗户侧面拖到侧面以缩小和成长Divs,那么在收缩到文本似乎不在完整右侧的情况下会发生一些奇怪的事件.

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

===完成CSS解决方案===

终于找到了右CSS组合!

http://jsfiddle.net/ssawchenko/gknuy/gknuy/

我的错误是我错误地漂浮了"适合"内容.通过将DIV移至DOM中的正确位置,内容正确浮动,并且"剩余大小" DIV现在将正确占用其余空间.

我也想强迫Divs占据一条线,这就是为什么我将如此严格的CSS设置在"剩余大小" DIV内容上的原因. 溢出:隐藏; 文字跨流:省略号;

推荐答案

#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现在将正确占用其余空间.

我也想强迫Divs占据一条线,这就是为什么我将如此严格的CSS设置在"剩余大小" DIV内容上的原因.溢出:隐藏;文字跨流:省略号;

其他推荐答案

这应该对您的好友有用.

<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-> http://jsfiddle.net/gmxwc/68/ /p>

其他推荐答案

您可以使用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/ - 这是工作示例

本文地址:https://www.itbaoku.cn/post/583369.html