Question

我已经多次看过这个问题，但还没有看到答案。有没有办法使用divs和css而不是表复制下面的行为？不喜欢没有javascript。

<style>
table.footer {
 width:100%;
}
td.footer-expandable {
 width:100%;
 border: 1px solid green;
 white-space: nowrap;
 text-overflow: clip;
}
td.footer-fixed {
 white-space: nowrap;
 border: 1px solid blue;
}
</style>
....
<table class="footer">
 <tr>
  <td class="footer-expandable">
   Expandable section.<br/>
   It should expand/collapse as necessary to fill all available space.
  </td>
  <td class="footer-fixed">
   Fixed width section.<br/>
   It should expand just enough to fit it's contents.
  </td>
</tr>

问题的第2部分将是如何剪辑“可扩展”文本中的文本。部分，以便它不包装？

Answer 1

你的意思是这样吗？

HTML：

<div id="footer">
    <div id="right">Expand just enough to fit</div>
    <div id="left">This one will fill any remaining space before breaking down to the next line. It will not  underflow on the right side do to the right side having a 100% margin height, even if this DIV spans for several lines. It will eventually, and that can be fixed by putting a margin of more than 100%.</div>
</div>

CSS：

#footer #right {
    float:right;
    border:1px solid black;
    margin-bottom:100%;
}
#footer #left {
    border:1px solid black;
}

小提琴：http://jsfiddle.net/64chLqdr/1/

请注意，#footer的宽度将决定margin-bottom:100%的大小。他们将是平等的。

Answer 2

您可以使用width: calc(100% - 350px)来计算div的宽度。

.wrapper {
  width: 100%;
}
.dynamic {
  border: 1px solid red;
  width: calc(100% - 350px);
  float: left;
  box-sizing: border-box;
}
.fixed {
  border: 1px solid green;
  width: 350px;
  float: left;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="dynamic">
    Expandable section.
    <br/>It should expand/collapse as necessary to fill all available space.
  </div>
  <div class="fixed">
    Fixed width section.
    <br/>It should expand just enough to fit it's contents.
  </div>
</div>

JSFiddle for responsiveness

页脚中的“rubberband”部分仅限css

2 个答案: