11

バランスの取れた (2-) 列レイアウトを作成しようとしています。

コンテンツはテキストではなくブロックで、高さが異なります。「左」と「右」の高さが (ほぼ) 同じである限り、コンテンツは左右交互に配置する必要があります。

つまり、この画像では: ここに画像の説明を入力 1 と 3 の間のスペースがあってはなりません。

または、このイメージで ここに画像の説明を入力 は、2 は右側に単独で、1、3、4 は左側に (間にスペースを空けて) 立つ必要があります。

次のように「フローティング<li>」を使用してみました。

HTML:

<ol class="context">
    <li class="gruppe">1</li>
    <li class="gruppe">2.0<br />2.1</li>
    <li class="gruppe">3.0<br />3.1</li>    
    <li class="gruppe">4</li>
</ol>

CSS:

ol.context 
{
  border: 1px solid #048;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 0;
  overflow: auto;
}

li.gruppe
{
  background: #048;
  color: white;
  float: left;
  font: bold 32px Arial, sans-serif;
  margin: 1px;
  text-align: center;
  width: calc(50% - 2px);
}

(試行 1と試行 2を参照)

列の ( ) も使用しようとしましcolumn-count: 2; column-fill: auto;たが、これは最初に列を左から右に埋めません。(最初に上から下に入力します。)

これはJavaScriptなしでも可能ですか?

4

6 に答える 6

5

これはJSなしでは不可能だと思います。これは、Ben Holland の記事に基づいて作成したフィドルです。少なくとも私には、あなたが求めているもののように見えます。

http://jsfiddle.net/QWsBJ/2/

HTML:

<body onload="setupBlocks();">
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
  <div class="block">
    <p>***Content***</p>
  </div>
</body>

CSS:

.block {
  position: absolute;
  background: #eee;
  padding: 20px;
  width: 300px;
  border: 1px solid #ddd;
}

JS:

var colCount = 0;
var colWidth = 0;
var margin = 20;
var blocks = [];

$(function(){
    $(window).resize(setupBlocks);
});

function setupBlocks() {
    colWidth = $('.block').outerWidth();
    colCount = 2
    for(var i=0;i<colCount;i++){
        blocks.push(margin);
    }
    positionBlocks();
}

function positionBlocks() {
    $('.block').each(function(){
        var min = Array.min(blocks);
        var index = $.inArray(min, blocks);
        var leftPos = margin+(index*(colWidth+margin));
        $(this).css({
            'left':leftPos+'px',
            'top':min+'px'
        });
        blocks[index] = min+$(this).outerHeight()+margin;
    }); 
}

Array.min = function(array) {
    return Math.min.apply(Math, array);
};
于 2013-07-15T09:14:52.757 に答える
0

flex と float の組み合わせを試すことができます (Firefox/IE10 と safari 5.1.7 でのみテストされています。私自身の意見によると、CSS は解決策ではありません)。

http://codepen.io/gcyrillus/pen/zgAiw

ただし、どの CSS ケースを選択する場合でも、mansonry スクリプトを中継するのが最善です。CSS は、この種のレイアウトにはあまり適していません。現時点では、レイアウト用の多くの CSS メソッドがあり、基本的にはディスプレイとフロートです。

これを html ツリー構造内で簡単に一緒に使用できますが、このメソッドを混在させることは意図されていません。ボックスはフローティング、インライン レベル ボックス、またはブロック レベル ボックスであり、それぞれがフロー内で相互作用すると想定されます。浮動、非浮動要素の後、それ自体の前で改行するか、十分なスペースができるまで下にスライドします。CSS r を介して左右にディスパッチすることはできません。

inline-block は浮動要素から離れて移動し、十分なスペースが残っていない場合は行を分割します。インライン ブロック間の浮動要素は、浮動する前に行を分割し続けます。

列 CSS は、列を 1 つずつコンテンツで埋めます。参照: http://codepen.io/gcyrillus/pen/AtazJ

Inline-flex 要素は浮動要素で動作するように見えます...しかし、それが検証済みのルールになるまでそれは想定されていますか?

私にとって賢明と思われるのは、予想されるレイアウトにjavascriptを使用し、floatまたはdisplay:inline-block + widthをフォールバックとして中継することです。

最後の解決策は、サーバー側でこれを先に考え、可能であれば別の適切なマークアップを使用して 2 つのコンテナーでアイテムをディスパッチすることです (実際のコンテンツが でディスパッチされることはわかりませんol li)。

FLEX テストの CSS :

li.gruppe
{
  background: #048;
  color: white;
  font: bold 32px Arial, sans-serif;
  text-align: center;
  box-sizing:border-box;
  border-bottom:1px solid white;
   border-bottom:1px solid white;
    display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: inline-flex;  
  width:50%;
 }
li:nth-child(even){
  float:right;
  clear:right;
  border-left:1px solid white;
  margin-top:0;
}
于 2013-07-16T14:17:00.593 に答える
-2

これが正しいかどうかはわかりません。.

「2 は右側に単独で配置し、1、3、4 は左側に配置する必要があります (間にスペースを空けないでください)。」

html:

<div id="box">
    <div class="data">1</div>
    <div class="data" style="float:right">2<br/>2<br/>2<br/>2</div>
    <div class="data">3<br/>3</div>
    <div class="data">4</div>
</div>

CSS:

#box {
    width:100%;
    height:auto;
    float:left;
}
.data {
    height:auto;
    width:50%;
    float:left;
    background-color:#ccc;
    border-bottom:solid 1px #000;
}

Fid: http://jsfiddle.net/YdEW9/26/

これは純粋な css です。次に、すべてがfloated leftinline-cssfloat:rightで div に渡されます(4) 2's

javascriptなしでinline-cssを設定する方法がちょっとわかりません。サーバー側かな？しかし、要素の高さを取得できるとは思えません。

とにかく、これが役立つことを願っています。

于 2013-07-15T13:30:04.577 に答える
-2

純粋な CSS ソリューション:

以下を css ファイルに追加します。

ol.context li:nth-child(even) {
float: right;
}

html などを変更しないでください。

FF の結果:

Firefox のレンダリング

--

使い方

すべての要素を「左」にフロートさせてギャップを作成する代わりに、要素が存在する側/列に従って各コンテナをフロートします。

于 2013-07-15T14:22:39.617 に答える