3

フロートが要素を互いに並べて配置し、本質的に縮小してフィットさせるのにどのように役立つかを理解していますが、テーブルのような外観を実現するにはどうすればよいでしょうか

Column 1        |        Column 2        |        Column 3
Column 4 Bigger |        Column 5        |        Column 6

列の最初のセットが、最大の要素の長さに合わせて調整されることに注意してください。では、列 4 が 1 より広い場合、1 は自動的に広くなりますか? これまでのところ、これを達成できる唯一の方法は、display: table と display: table-cell を使用することですが、特定の幅などを設定する必要があるため、少し不安定です。この種のことを行う方法...それ以外の場合はテーブルのないWebで。

4

2 に答える 2

1

これがあなたの質問に答えることを願っています:):

<style>
.clear{
clear:both;
}

.column {
float:left;
height :20px;
width: auto ;
margin:5px;
display :block;
}
</style>


<div id = "Column 1 " class="column">
cell 1
<div class="clear"></div>
cell 4 Bigger
<div class="clear"></div>
cell 7
</div>

<div id = "Column 2 " class="column">
Cell 2
<div class="clear"></div>
Cell 5 
<div class="clear"></div>
Cell 8 
</div>

<div id = "Column 3 " class="column">
Cell 3
<div class="clear"></div>
Cell 6 
<div class="clear"></div>
Cell 9 
</div>

ボーダーを追加する編集 も簡単です。その URL を確認できます: http://www.bernzilla.com/design/tables/table.html

于 2012-11-18T04:59:22.447 に答える
0

フロートだけでは、列 1 の幅を列 4 の幅に依存させる方法はありません (つまり、列 4 の幅が広くなるにつれて列 1 の幅も広くなります)。

代わりに、Column 1 と Column 4 Wider をフロート コンテナの中に入れてから、Column 1 と 4 からフロートを取り外します。同様に、2 と 5、3 と 6 についても同じ操作を行います。

于 2012-11-18T04:53:25.353 に答える