当前位置：文江博客话题详情

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

发布于 2024-11-29 06:17:19 字数 1165 浏览 2 评论 0原文

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

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

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

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

我希望你们中的一位堆栈窥视者可以帮助我！

=== CSS（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。溢出：隐藏；文本溢出：省略号；

原文

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.

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.

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

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

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

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.

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

=== Complete CSS Solution ===

FINALLY found the right CSS combination!

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.

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;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃酥萝莉 2024-12-06 06:17:19

#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。溢出：隐藏；文本溢出：省略号；

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

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;

回复收藏 0 原文

余生一个溪 2024-12-06 06:17:19

这应该对你有用，伙计。

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

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/

回复收藏 0 原文

微凉徒眸意 2024-12-06 06:17:19

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

you can use jQuery and code like this:

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

回复收藏 0 原文

~没有更多了~