-1

この質問の質が低いことをお詫びします。CSS と HTML は、私のいつもの踏み台ではありません。私はただ尋ねようとしている段階に達しました:一体どうやってこれを行うのですか?

私は友人のサイト (Wordpress、自己ホスト型) に取り組んでおり、彼女のためにいくつかの新しいページを設定しています。テーマのスタイルシートを変更したくありませんし、子テーマを作成するのは私には無理なので、インライン CSS に限定されていると思います (間違っていたら訂正してください - 私も Wordpress 初心者です)。

現在、次のように始まる次の HTML テーブルがあります。

<table>
<tbody>
<tr>
<td style="vertical-align: top; padding-right: 20px;">
<h2 style="padding-top: 5px;">Swiss balls/eggs</h2>
<p>Large inflatable balls of varying sizes that provide support and/or an unstable base to add challenge and variety to your workout. For those with balance issues, inflatable eggs roll in one direction only for security.</p></td>
<td style="width: 160px;"><img alt="Swiss ball" src="/wp-content/uploads/2013/08/eqpt-swissball-trans.png" /></td>
<td style="vertical-align: top;" rowspan="6"><img alt="Fitness equipment" src="/wp-content/uploads/2013/08/equipment-vertical.jpg" /></td>
</tr>

...さらに、次のような 5 つの繰り返し行要素があります。

<tr>
<td style="vertical-align: top;">
<h2 style="padding-top: 5px;">Pilates balls</h2>
<p>Smaller, soft inflatable balls of varying size that can add support, postural correction and resistance for many of the classic exercises.</p></td>
<td style="width: 160px;"><img alt="Small Pilates balls x 5" src="/wp-content/uploads/2013/08/eqpt-smallpilatesballsx5-trans.png" /></td>
</tr>

これにより、これと同様の 3 列 x 6 行のレイアウトが作成されます。

レイアウト例

ここ数時間、フォーラムやスタックオーバーフローなどをブラウジングしてきました (例: here )。フローティング div のさまざまな実装を試みましたが、プレースホルダー テキストを置き換えるとすぐに、少量のテキストと画像なしで動作する例を取得できます。私の画像とテキストでは、すべてがバラバラになり、divが垂直に次々と表示され始めます。

4

1 に答える 1

0

divs列が固定幅である場合にのみ、テーブルを実際にフローティングに置き換えることができます。ただし、幅が固定されている場合は、行 ( <tr>) をラッパー div に置き換え、セル ( <td>) を固定幅のフローティング div に置き換えます。

最初に、わかりやすくするために、非インライン スタイルで表示します。

<div class='row'>
  <div class='col1'>
    <!-- First column content here -->
  </div>
  <div class='col2'>
    <!-- Second column content here -->
  </div>
  <div class='col2'>
    <!-- Second column content here -->
  </div>
  <hr class='clear'>
</div>

そしてCSS：

.row {
  width: 600px;
}
.col1, .col2, .col3 {
  float: left;
  min-height: 1px;
  width: 300px;
}
.clear {
  border: none;
  clear: both;
}

注：個々の列とテーブル.colの幅は、それぞれ幅と幅で変更でき.rowます。

次にインライン化します。

<div class='row' style='width: 600px'>
  <div class='col1' style='float: left; min-height: 1px; width: 200px'>
    <!-- First column content here -->
  </div>
  <div class='col2' style='float: left; min-height: 1px; width: 200px'>
    <!-- Second column content here -->
  </div>
  <div class='col2' style='float: left; min-height: 1px; width: 200px'>
    <!-- Second column content here -->
  </div>
  <hr class='clear' style='border: none; clear: both'>
</div>
于 2013-08-04T19:12:43.443 に答える