Question

我想做的是：

alt text

以文本形式：

XXX Some text here YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ZZZZZZZZZ

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

X，Y和Z是图像（总共3个图像）。 Y可沿X轴伸展，并在上方伸展，以填充可用空间。（但不会导致“某些文字在这里”被压扁并开始分成多行）

我想将“这里的一些文字”部分保留在一行中。打破这里的一条线不会快乐地结束。

这可能，还是应该简化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>

关闭......是的。 列的所有（除了带有文本的列和width: 100%之一）都忽略了Firefox和Chrome中的CSS宽度属性。这就是它的样子：

alt text

我尝试使用<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

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

alt text

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

Answer 2

LOL！让我们看看我是否理解......试试这个！

HTML：

<div id="foo">
    <h3>This is my CSS title! :)</h3>
</div>

CSS：

#foo {
    width:900px;
    margin:0 auto; /* center to the screen horizontally */
    background:#ccc;

    /* increase border radius until it is curvefull! */
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
}
#foo h3 {
    font:bold 14px Georgia, Arial, Sans;
    color:#333;
    margin:0;
    padding:25px 0 25px 50px; /* top, right, bottom, left */
}

简单？ XD

Answer 3

试试这个

<table><tr>
  <td>XXX</td>
  <td>Some text here</td>
  <td>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td>
  <td>ZZZZZZZZZ</td>
</tr>
</table>

Answer 4

<div style="float:left; width: 100px; background: url(X) repeat-x;"> </div>
<div style="float:left;"> Some Text </div>
<div style="float:left; width: 200px; background: url(Y) repeat-x;"> </div>
<div style="float:left; width: 150px; background: url(Z) repeat-x;"> </div>
<div style="clear: both;"></div>
<div style="float:left; width: 500px;"> body </div>
<div style="float:left; width: 100px;"> sidebar </div>

您可以更改包装宽度的宽度

HTML：填充可用宽度

4 个答案: