1

すべてのフローティング div が 100%/n の動的な幅を持つ複数列の分割レイアウトが可能かどうか疑問に思っています。

したがって、次の構造がある場合

<div id="mycontainer">
    <div class="split">
        LOREM
    </div>
    <div class="split">
        IPSUM
    </div>
</div>

結果の css は次のようになります。

.split {
    float: left;
    width: 50%;
}

.split:last-child {
    float: right;
}

一方

<div id="mycontainer">
    <div class="split">
        LOREM
    </div>
    <div class="split">
        IPSUM
    </div>
    <div class="split">
        DOLOR
    </div>
</div>

結果として

.split {
    float: left;
    width: 33.33%;
}

等々。私は単純な CSS ソリューションを好みます。一般に、 jQuery JavaScript を使用して簡単に実現できることを知っています。

4

5 に答える 5

6

純粋な CSSソリューションは、 DIVour を親愛なるに偽装することtableですが、そうではありません! それは有効な解決策です。

http://jsbin.com/amequw/1/edit

#mycontainer{
  background:#eee;
  padding:10px 0;
  display:table;      /* Fake :) */
  width:100%;
}
.split{
  background:#eee;
  display:table-cell; /* Act! */
}

.splitそして、これが1つ少ないデモです:

http://jsbin.com/amequw/2/edit

于 2013-07-10T11:46:21.157 に答える
2

twocolumn、threecolumn、fourcolumn などに異なるクラスを使用できます。したがって、CSS は次のようになります。

.column { float: left; }
.column-right { /* Just in case */ }

.twocolumn .column { width: 50%; }
.threecolumn .column { width: 33%; } 
 /* ... */

そしてあなたのHTMLのような

<div class="twocolumn">
     <div class="column column-left">Split</div>
     <div class="column column-right">Split</div>
</div>

また

<div class="threecolumn">
     <div class="column column-left">Split</div>
     <div class="column">Split</div>
     <div class="column column-right">Split</div>
</div>
于 2013-07-10T11:48:56.220 に答える