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

时间：2022-08-25 18:42:51

This should be easy... why is this not easy?

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

I am looking to have 2 divs side by side, where one div will auto size to the content inside and the second div will simply fill the remaining width. I need the text in the 'remaining width' div to be truncated if it is too large though, as I can only have these divs occupy one line.

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

I have been searching all day and the closest I found was this post which suggested using tables that STILL didn't fix the issue.

我一整天都在搜索,我发现最接近的是这篇帖子,建议使用STILL没有解决问题的表格。

Here is the jsfiddle code that reproduces my issue: http://jsfiddle.net/ssawchenko/gMxWc/

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

I am hoping that one of you stack-peeps can help me out!

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

=== CSS (Hacky) Solution? ===

=== CSS(Hacky)解决方案? ===

Apparently adding a negative margin (that must guarantee to be big enough to cover the right size) will "work". This seems so hacky and may not fix the issue completely though. If I drag the jsfiddle window side to side to shrink and grow the divs, some oddities occur where the shrink-to text seems to float not on the complete right.

显然添加负余量(必须保证足够大以覆盖正确的大小)将“起作用”。这似乎是如此hacky,但可能无法完全解决问题。如果我将jsfiddle窗口左右拖动以缩小和增长div,则会出现一些奇怪的现象,收缩文本似乎不会浮动在完整的右侧。

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

=== Complete CSS Solution ===

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

FINALLY found the right CSS combination!

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

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

My mistake was I was incorrectly floating my "fit to" content. By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space.

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

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;

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

3 个解决方案

#1

6  

#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>

My mistake was I was incorrectly floating my "fit to" content. By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space.

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

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;

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

#2

3  

This should work for you buddy.

这应该适合你的伙伴。

<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>

Your working jsfiddle --> http://jsfiddle.net/gMxWc/68/

你工作的jsfiddle - > http://jsfiddle.net/gMxWc/68/

#3

0  

you can use jQuery and code like this:

你可以像这样使用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/ - here is working example

http://jsfiddle.net/gMxWc/62/ - 这是一个有效的例子

#1

6  

#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>

My mistake was I was incorrectly floating my "fit to" content. By moving the div to the correct location in the DOM the content is floated correctly, and the "remaining sized" div will now correctly take up the remaining space.

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

I also wanted to force the divs to occupy ONE line, which is why I have set such strict CSS on the "remaining sized" div content. overflow:hidden; text-overflow:ellipsis;

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

#2

3  

This should work for you buddy.

这应该适合你的伙伴。

<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>

Your working jsfiddle --> http://jsfiddle.net/gMxWc/68/

你工作的jsfiddle - > http://jsfiddle.net/gMxWc/68/

#3

0  

you can use jQuery and code like this:

你可以像这样使用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/ - here is working example

http://jsfiddle.net/gMxWc/62/ - 这是一个有效的例子

标签：

相关文章