2

我得到了 3 个相邻的图像，包裹在一个可以使用最小宽度和最大宽度调整大小的 div 中。

左右图像具有固定的宽度/高度。

中心图像应根据外部 div 的宽度填充可用空间。

到目前为止我得到了什么：

  <div id="orangeheader" style="min-width:750px;max-width:1140px;overflow:hidden;white-space:nowrap;">
    <img src="images/header_left.gif" width="220" height="150" border="0" alt="" style="float:left"/>
    <img src="images/header_middle.gif"  height="150" alt="" style="width:100%" />
    <img src="images/header_right.gif" width="275" height="150" alt="" style="float:right" />
  </div>

也许这应该用一张桌子来解决？

4

3 回答 3

0

尝试这个

<table style="border-padding:0;border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:none;width:100%;overflow:hidden;white-space:nowrap;">
  <tr>
    <td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:220px;">
      <a href="index.php">
        <img src="images/header_left.gif" style="width:220px;height:150px;border:0" alt="">
      </a>
    </td>
    <td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;">
      <img src="images/header_middle.gif" style="width:100%;height:150px" alt="">
    </td>
    <td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:275px;">
      <img src="images/header_right.gif" style="width:275px;height:150px" alt="">
    </td>
  </tr>
</table>

于 2014-09-25T10:46:41.313 回答
0

我说这是不可能的。

但吹代码部分地做：

  <div style="min-width: 750px; max-width: 1140px; overflow: auto; width: 100%;" id="orangeheader">
    <img width="220" height="150" border="0" style="float: left;" alt="" src="images/header_left.gif">
    <img height="150" style="float: left; max-width: 645px; min-width: 255px; width: 30%;" alt="" src="images/header_middle.gif">
    <img width="275" height="150" style="float:right" alt="" src="images/header_right.gif">
  </div>

你可以给percent %左右宽度。

您也可以将图案用于中间图像。http://pattern8.com/ 希望有所帮助。

于 2013-06-16T10:36:22.153 回答
0

fwiw，我选择了一个表格解决方案：

<table style="border-padding:0;border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:none;width:100%;overflow:hidden;white-space:nowrap;">
<tr>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:220px;"><a href="index.php"><img src="images/header_left.gif" style="width:220px;height:150px;border:0" alt=""></a></td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;"><img src="images/header_middle.gif" style="width:100%;height:150px" alt=""></td>
<td style="border-spacing:0;border-collapse:collapse;padding:0;spacing:0;border:0;width:275px;"><img src="images/header_right.gif" style="width:275px;height:150px" alt=""></td>
</tr>
</table>
于 2013-06-16T13:04:34.277 回答