HTML:填充可用宽度

Question

我想做的是:

以文本形式:

XXX Some text here YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ZZZZZZZZZ

Body body body                                          Sidebar!
Body body body                                          Sidebar!
Body body body                                          Sidebar!

X、Y 和 Z 是图像(总共 3 张图像)。 Y 可以沿 X 轴拉伸(stretch)，并在上面这样做，以填充可用空间。 (但不会导致“此处的一些文本”被压扁并开始分成多行)

我想将“此处的一些文本”部分保留在一行中。在这里断线不会愉快地结束。

这可能吗，还是我应该围绕 HTML 简化布局？

---

我目前尝试使用表格:

<table cellspacing="0" cellpadding="0" border="0" style="height: 20px; width: 100%;">
  <tr>
    <td style="width: 205px; height: 20px; background: url('images/horz_bar_left_end.png');">&nbsp;</td>
    <td style="width: 5px; height: 20px; background: url('images/transparent.gif');"/>&nbsp;</td>
    <td valign="center" style="height: 20px; white-space: nowrap; font-weight: bold;">THIS IS A TITLE</td>
    <td style="width: 5px; height: 20px; background: url('images/transparent.gif');">&nbsp;</td>
    <td style="width: 100%; background: url('images/blue.gif');">&nbsp;</td>
    <td style="width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');">&nbsp;</td>
  </tr>
</table>

关闭... ish。 所有 列(带有文本的列和 width: 100% 列除外)在 Firefox 和 Chrome 中都忽略了它们的 CSS 宽度属性。这是它的样子:

我尝试使用 <div>以及所有那些 CSS 爵士乐。

<div style="white-space: nowrap;">
  <div style="float:left; width: 25px; height: 20px; background: url('images/horz_bar_left_end2.png');">&nbsp;</div>
  <div style="float:left;">Some Text</div>
  <div style="float:left; width: 100%; height: 20px; background: url('images/blue.gif') repeat;">&nbsp;</div>
  <div style="float:left; width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');">&nbsp;</div>
  <div style="clear: both;"></div>
  <div style="float:left; width: 500px;"> body </div>
  <div style="float:left; width: 100px;"> sidebar </div>
</div>

...大量失败。它就像三行。

对于那些想在家玩的人，这里有图片:

• horz_bar_left_end.png:
• horz_bar_right_upper.png
• transparent.gif:1x1 透明 GIF
• blue.png:1x1 蓝色 PNG。 (#0073e4)

Answer 1

您可以通过多种方式来存档您的网页布局。

代码更新看http://jsbin.com/awudi4/