0

横スクロールのあるタイムラインを構築したい。

私はラッパー DIV を持っています。その中には月があります。各月は DIV インライン ブロックです。これは機能します：

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

これはほとんど機能しますが、私のクライアント サイトではレイアウトにテーブルを使用しているため、スクロール バーが機能しません。これは失敗します:

<table><tr><td>

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

</td></tr></table>

ここに私が何を意味するかを示すjsfiddleがあります：http://jsfiddle.net/fhL9u/2/

注: 上のタイムラインの例は、ブラウザーのサイズを変更すると機能します。ページ (または要素を含む) の 100% の幅です。

2 番目のタイムラインを正しくオーバーフローさせるにはどうすればよいですか? 画面の残りの幅を占める必要があり( 100pxのハックでは不可)、可能であれば、月がオーバーフローしたときにのみスクロール バーを表示する必要があります。

これは内部アプリケーションであるため、必要に応じて Firefox または Chrome を使用するように人々に伝えることができます。これは、高度な CSS3 やブラウザー固有 ( -webkit または -moz ) のものを使用できることを意味します。私はそれがIE8互換であることを望みます（私自身の好奇心のためだけに）

4

3 に答える 3

2

widthそのテキストを（ピクセルまたはパーセントで）修正できる場合は、次の解決策を使用してください。

table {
    table-layout: fixed;
    width: 100%;
}

td:first-child {
    width: 100px;    /* or width: 15%; */
}

テキストに別のセレクターを使用できることに注意してください（ などclass）

于 2012-09-20T15:41:11.527 に答える
0

div.wrapに幅を設定するだけで、たとえば400px-これは機能し、1行のコードです:-)

于 2012-09-21T13:45:05.477 に答える
0

考えられる解決策...

主な問題は、「サイトナビゲーション」セルがスクロール領域の一部である可能性があります。

table { display: block; }

次に、クラスをテーブルに割り当て、.wrap月を含むdivを削除します。

ここでフィドル

Chromeでのみテストされています。

于 2012-09-20T15:49:02.327 に答える