0

重複の可能性:
2 つの div、一方は固定幅、もう一方は残り

div右側にはランダムな幅がある2が横に並んでいる必要があります (これには別の 2 が含まれますdiv- ランダムなテキストを含むヘッダーとランダムな画像を含む本文、すべて JS によって生成されます)。左は残りの幅を使用する必要があります (これには、別の 2 つdivの s (ヘッダーと本文 (どちらも静的テキストのみを含む)) も含まれます。

私は現在、非常に単純な 3 s のソリューションをtable考え出していますが、厳密な表形式のコンテンツを使用せずにすべてのテーブルを CSS に再コーディングしているため (はい、これでかなり遅れています)、これはCSSでも可能ですか？かなり長い間解決策を探した後、そうではないかもしれません...

注目に値するのは、画像の高さが常に同じであり、すべての画像の幅も JS で指定されていることです。

私の現在の解決策（JSなどを可能な限りシンプルかつ明確にするために取り除いたもの。画像は単なる例であり、最大250pxの幅を持つ場合があります）：私のフィドル

HTML:

<table class="container" cellpadding="0">
 <tr>
  <td>
   <table class="left">
    <thead>
     <tr>
      <th>Text Header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>This just contains text.
      </td>
     </tr>
    </tbody>
   </table>
  </td>
  <td>
   <table class="right">
        <thead><tr>
        <th>Image Header</th>
        </tr></thead>
        <tbody>
        <tr>
        <td>
         <img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
        </td>
        </tr>
        </tbody>
        </table>
  </td>
 </tr>
</table>

CSS:

table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}

JS と私の未完成の CSS のみのソリューションも必要かどうか教えてください。

4

1 に答える 1

1

js ではなく、2 つのフローティング div を使用する場合、1 つはテキストとテキスト ヘッダーを含み、もう 1 つはイメージとイメージ ヘッダーを含みます。

http://jsfiddle.net/PeyWR/10/

（あなたのスタイリングの一部を失いましたが、アイデアはそこにあると思います）。

于 2012-08-03T06:39:40.503 に答える