2

min-width と max-width を使用してサイズを変更できる div にラップされた 3 つの画像を隣り合わせに取得しました。

左右の画像の幅/高さは固定されています。

外側の 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

私はこれは不可能だと言います。

しかしブローコードは部分的に行います:

  <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

これを試して

<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

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 に答える