Question

我有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>

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

Answer 1

我说这是不可能的。

但是吹码部分确实：

  <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/ 希望有所帮助。

Answer 2

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>

Answer 3

试试这个

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

CSS使图像填充可用宽度

3 个答案: