0

divを使用して「偽の」テーブルを使用しようとしています。

フェイクテーブルの構造はシンプル

<div id="fatable">
   <div id="fatable1"></div>
   <div id="fatable2"></div>
   <div id="fatable3"></div>
   <div id="fatable4"></div>
   <div id="fatable5"></div>
   <div id="fatable6"></div>
   <div id="fatable7"></div>
   <div id="fatable8"></div>
</div>

#fatable {
    width:100%;
    white-space: nowrap;
}
#fatable1, #fatable2, #fatable3, #fatable4, #fatable5, #fatable6, #fatable7, #fatable8 {
    float:left;
}

私の問題は、 #fatable3 と呼ばれる要素がそれ自体を展開する必要があるため、 #fatable が常に 100% の可能性に達することです。

#fatable3は「伸縮自在」な検索入力フィールドであるため、たとえば 1900px が 1200 から 1900px になるたびに、この要素は #fatable に「成長」して 100% に達する必要があります。

私はjsfiddleさえ持っています。なぜなら、これがとても大変だったことを覚えているからです。しかし、100% の幅を設定すると#fatable3、この要素はページの 100% の幅を取り、#fatable実際には画面の幅の 175% になります。

http://jsfiddle.net/DDMMc/

それとも、これを達成するために実際のテーブルに移動する必要がありますか?

これがjsfiddleの簡略版です。すべてを1行にする必要がありますが、インライン要素の幅を100％に設定すると、ドロップします。内部に残されたスペースではなく、幅の100％を取るためです。 . 私を理解してくれることを願っています

ここにあります：http://jsfiddle.net/sU5Kx/

4

2 に答える 2

2

div テーブルのレイアウトには CSS コードを使用する必要があります。とてもきれいです。ここであなたのフィドルを更新しまし た リンク

詳細については、css div tablelayoutを検索してください。

#fatable {
max-width:100%;
width:100%;
white-space: nowrap;
display: table;
float:left;
}
于 2013-08-04T18:13:48.253 に答える
0

私は推測をしただけで、これがあなたが望むものであることを願っています..

ここにフィドルのデモがあります

これをfatable3..に追加するだけです。

 #fatable #fatable3
{
   float:left;
   width:100% !important;
}

これによりUAのデザインが変更されますが、必要に応じて他のdivを調整できます...

于 2013-08-04T18:03:50.577 に答える