0

だから私は20個ほどのタグを持っていて、それらはすべて絶対位置を持っています. これらは、XML から取得した応答に基づいて動的に生成され、現在は隣同士に配置されています。

各行で 4 になるように配置するにはどうすればよいですか。ただし、5 番目のタグを 1 番目のタグの正確に下に配置し、6 番目のタグを 2 番目のタグの下に配置するなどです。タグごとに高さが異なります。通常、最初の 4 つはアラインメントを必要としません。

構造は次のとおりです。

<table>
  <tbody>
     <tr>
     <tr>
     <tr>
     ........
     <tr>
     <tr>
  </tbody>
</table>

タグのCSSは次のとおりです。

.innerContent tr {
      background: none repeat scroll 0 0 #F3F3F3;
      border-radius: 5px 5px 5px 5px;    
      float: left;
      height: auto;
      margin: 0 5px 25px;
      padding: 0;
      position: absolute;
      transition: all 1s ease 0s;
      z-index: 5;
}

これは CSS で実現できるとは思えないので、JQuery を考えています。私が試したすべてのことは、それらをすべて4 x 4でオーバーラップさせるだけでした.

4

2 に答える 2

1

上記のコメントで述べたように、これには a を使用しないことを強くお勧めtableします。表形式のデータを入力しているようには見えないため、レイアウト ツールとして使用しているだけです。そして、あなたがやりたいことにとって、それは非常に悪いツールです。

上で Twitter Bootstrap について言及したので、足場グリッド システムを利用することをお勧めします。非常に基本的な例を示すために、このjsFiddleを見て、私がこれにどのようにアプローチするかを確認してください。

完成のために、jsFiddle で使用した HTML を次に示します。これにより、行ごとに幅 220 ピクセルの 4 列が配置されます (コンテナーの幅 940 ピクセルに基づく)。別のコンテナー サイズが必要な場合は、幅を少し調整するだけです。

もちろん、これには Bootstrap CSS を使用する必要があります。

<div class="row">
  <div class="span3">Hotel 1</div>
  <div class="span3">Hotel 2</div>
  <div class="span3">Hotel 3</div>
  <div class="span3">Hotel 4</div>
  <div class="span3">Hotel 5</div>
  <div class="span3">Hotel 6</div>
</div>
于 2013-04-17T16:54:04.497 に答える