0

これは本当に難しいかもしれません！

これが私が達成したいことです：

3列フィネラ

これがjsfiddleの私のテストコードです

私は運が悪いので、さまざまなことを試しました。問題は、左右の両方の div 幅がテキスト幅に基づいていることです。また、サイトの背景がグラデーションであるため、結合点線を左と右の div の下に配置し、背景色でマスクすることもできません。

少なくともこの場合、親 div は固定されています。

何かご意見は？

4

2 に答える 2

0

私はテーブルの使用に関する提案を提供するのは本当に嫌いですが、これはテーブル/ div/cssハイブリッドソリューションでそれを行う最も簡単な方法です。テストされ、動作します。

<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        a
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        z
    </td>
  </tr>
</table>
</div>
<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        1
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        infinity
    </td>
  </tr>
</table>
</div>
于 2011-03-16T15:38:55.137 に答える
0

jsfiddle コードを少しいじって、3 列の CSS フレキシブル レイアウトを調べた後、「css 目次」をググってみました。最初のエントリはCSS Table of Contentsで、これはうまくいくようです。それ以外の場合は、投稿で参照されている投稿、または他の検索結果を見てください。

于 2011-03-16T15:05:33.843 に答える