web-dev-qa-db-ja.com

CSSでフロートトップを作成するにはどうすればよいですか？

CSSはフロートプロパティの左と右の値のみをサポートすることを知っていますが、フローティングトップを実装する技術はありますか？説明しようと思います。私は次のコードを持っています：

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

このコードでは、すべてのdivがページの右端に達するまで左にフロートされます。同じことを垂直方向に行いたいため、すべてのdivが前のdivの下部に配置され、ページの下部の制限に達すると、新しい列が作成されます。 CSSのみを使用してこれを行う方法はありますか（HTMLコードを編集する場合もあります）？

htmlcsscss-float
64
mck89

CSSのみでこれを行う唯一の方法は、すべてのブラウザー（FF 3.5、Opera、Safari、Chromeなどの最新世代のみ）で動作しないCSS 3を使用することです。

確かに、CSS 3には次のような素晴らしいプロパティがあります。

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

#myContentが他のdivをラップしている場合。

詳細はこちら： http://www.quirksmode.org/css/multicolumn.html

あなたがそこで読むことができるように、これを使用することには重大な制限があります。上記の例では、コンテンツがオーバーフローした場合にのみ、別の列が追加されます。 mozillaでは、列幅プロパティを使用して、必要な数の列にコンテンツを分割できます。

それ以外の場合は、JavaScriptまたはバックエンドの異なるdiv間でコンテンツを配布する必要があります。

28
Guillaume Flandre

単にvertical-align：

.className {
    display: inline-block;
    vertical-align: top;
}
34
Abhishek Goel

Hugogi Raudel は、CSSによってこれを達成する興味深い方法を思いつきました。ここにHTMLマークアップがあるとします：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

このCSSコードを使用して3行の列を実現できます。

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

最終結果は次のとおりです。
enter image description here
ここで行っているのは、行の各アイテムに適切なマージンを追加することです。このアプローチの制限は、列の行数を決定する必要があることです。動的にはなりません。確かにユースケースがあるので、このソリューションをここに含めました。

15
Arash Milani

float:topはなく、float:leftとfloat:rightのみがあります

Divをお互いの下に表示したい場合は、以下を行う必要があります。

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
7
James Goodwin

私も楽しみのためにこれを試しました-私も解決策が欲しいので。

フィドル： http://jsfiddle.net/4V4cD/1/

html：

<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>

css：

#container { 
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}

.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-Origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}

これは、より高い/より広いdivで機能することがわかります。横向きに考えるだけです。ポジショニングが問題になると思います。 transform-Originはそれを助けてくれるはずです。

5
Ron

FF、Opera、Chromeで機能する（ほぼ完璧な）ソリューションを次に示します。

    <style>
    html {height:100%}
    p {page-break-inside:avoid;text-align:center;
       width:128px;display:inline-block; 
       padding:2px;margin:2px;border:1px solid red; border-radius: 8px;}
    a {display:block;text-decoration:none}
    b {display:block;color:red}
    body {
       margin:0px;padding:1%;
       height:97%; /* less than 98 b/c scroolbar */
      -webkit-column-width:138px;
      -moz-column-width:138px;
      column-width:138px;
    }
    </style>

    <body>
    <p><b>title 1</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    </p>

    <p><b>title 2</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    <a>link 5</a>
    </p>

    </body>

トリックは、Pで「page-break-inside：avoid」、BODYでcolumn-widthです。動的な列カウントが付属しています。 Aのテキストは複数行で、ブロックの高さは異なる場合があります。

たぶん、誰かがEdgeとIEのために何かを持っている

2
user6594402

あなたが話していることを達成するための最良の方法は、列となる一連のdivを用意し、それらを説明した方法で設定することだと思います。次に、これらのdivを、あなたが話しているコンテンツで垂直に埋めます。

2
iandisme
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>

block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}

ただし、divの要素の数が固定されていない場合、または要素の量がわからない場合は、JSが必要です。 jQuery :even、:oddを使用します

2
glazsasha

CSS3を使用してこれを達成するには、適切に理解している限りそれほど難しくはありません。 HTML DIVは次のように見えるとしましょう。

<div class="rightDIV">
   <p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
   <p>Some content</p>
</div>

CSSは次のようになります。次のCSSは、DIVに左フロートを実行させ、親DIV要素の左に「固定」します。次に、「top：0」を使用すると、ブラウザウィンドウの上部に「固定」されます。

  #rightDIV {
       float: left
       top: 0
    }
  #leftDIV {
       float: right;
       top: 0
   }
2
Jason

JQueryで作成しました。

FirefoxとIE10でテストしました。

私の問題では、アイテムの高さが異なります。

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            border: 1px solid #FF0;
            width: 100px;
            position: relative;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <script>
        function itemClicked(e) {
            if (navigator.appName == 'Microsoft Internet Explorer')
                e.removeNode();
            else
                e.remove();
            reposition();
        }

        function reposition() {
            var px = 0;
            var py = 0;
            var margeY = 0;
            var limitContainer = $('#divContainer').innerHeight();
            var voltaY=false;

            $('#divContainer .item').each(function(key, value){
                var c = $(value);

                if ((py+c.outerHeight()) > limitContainer) {
                    px+=100;
                    margeY-=py;
                    py=0;
                    voltaY=true;
                }

                c.animate({
                    left:px+'px',
                    top:margeY+'px'
                });

                voltaY=false;
                py+=c.outerHeight();
            });
        }

        function addItem() {
            $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>');
            reposition();
        }

    </script>
    <div id="divMarge" style="height: 100px;"></div>
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;">
        <!--div class="item"></div-->
    </div>
    <div style="border: 1px solid #00F;">
        <input type="button" value="Add Item" onclick="addItem();" />
    </div>
</body>
</html>
2
Flavio Sousa

私のために働いたトリックは、div-alignmentの期間中に書き込みモードを変更することでした。

.outer{  
  /* Limit height of outer div so there has to be a line-break*/
  height:100px;
  
  /*  Tell the browser we are writing chinese. This makes everything that is text
  top-bottom then left to right. */
  writing-mode:vertical-lr;

}

.outer > div{
  /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
  */
  float:left;
  width:40px;  
  
  /* Switch back to normal writing mode. If you leave this out, everything inside the
  div will also be top-bottom. */
  writing-mode:horizontal-tb;

}
<div class="outer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>
1
KarlsFriend

これは動作し、ulに適用されます：

display:flex;
flex-direction:column;
flex-wrap:wrap;
1
Roney

あなたは兄弟セレクタで何かをすることができるかもしれません、例えば：

div + div + div + div{
float: left
}

試していないが、これはおそらくあなたが望むことをして残っている4番目のdivをフロートさせるかもしれない。再び完全にサポートされていません。

0
matpol

私はこの質問が古いことを知っています。しかし、今日ここでそれをしたい人は誰でもここに行きます。

div.floatablediv{
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
}
div.floatcontainer{
  -webkit-column-count: 2;
        -webkit-column-gap: 1px;
        -webkit-column-fill: auto;
        -moz-column-count: 2;
        -moz-column-gap: 1px;
        -moz-column-fill: auto;
        column-count: 2;
        column-gap: 1px;
        column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
  <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
  </div>
    <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
  </div>
    <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
  </div>
    <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
  </div>
  <div style="clear:both;"></div>
</div>
0
aBetterGamer