How to place two divs side by side where one sized to fit and other takes up remaining space?

后端未结

关注

 3  1770

被撕碎了的回忆

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 si

相关标签:

3条回答

别那么骄傲

2021-01-02 02:03

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 讨论(0)

再見小時候

2021-01-02 02:13

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

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 讨论(0)

再見小時候

2021-01-02 02:13

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 讨论(0)