0

現在、次のような HTML テーブルがあります。

---COLM1---|---COLM2---|---COLM3---

data1         smalldata

data 2

data 3

NEW ROW 1     NEW ROW 2

新しい行 1 は、最も長いコンテンツのすぐ下にある列 1 の新しい行を示していますが、行 2 では小さなデータのすぐ下に表示したいと考えています。

私が現在持っているコードは、この例では機能しますが、私が望むものでは機能しません:

/**-- 3 Column Table  Using Divs
Each Column can be any length
--**/       
.divTable{
width: 100%;
}
.divTableArticle{
display: inline-block;
vertical-align: top;
width: 23%;                     
}

.divTableRow{
clear: left;
padding-top: 15px;
margin-bottom: 10px;
}

そしてhtmlは対応します：

<div class="divTable">
 <!--AS MANY ROWS-->
       <div class="divTableRow">
           <!---AS MANY ARTICLES--->
           <div class="divTableArticle"></div>
       </div>
</div>

新しい要件に合わせてコードを変更するにはどうすればよいですか?

現在、各行のデータをリストしているので、各列のデータをリストした方がよいでしょうか?

JSフィドル：ここをクリック

4

1 に答える 1

2

それらの記事が独立しており、リンクできない場合 (たとえば、2012 年と 2007 年を 1 つのペアとして)、それらを配置しないと (つまり、JS または jQuery を使用して) 不可能だと思います。しかし、単純化された HTML と CSS の場合、これは私が得ることができた最も近いものです (これは実際にはあなたが望むようには機能しません):

<div class="divTable">
    <div class="divTableArticle"></div><!-- Needed for removing whitespace
 --><div class="divTableArticle"></div>
</div>

.divTableArticle{
    display: inline-block;
    width: 33.3333%;
    float: left;
}

JSフィドル

于 2013-04-03T10:08:29.807 に答える