3

シンプルなタイルグリッドを作ろうとしています。ここに私のHTMLがあります：

<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>

そしてCSS：

.tiles {
width :100px;
}

.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}

.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}

結果は次のとおりです。

3 つの float div

私の質問は、3 番目の div が新しい行に挿入されるのを防ぎ、代わりにギャップを埋めるにはどうすればよいですか?

jsfiddleでのライブ デモ。

4

13 に答える 13

1

.tile50x50 を に変更するとうまくいきますがfloat:right、より多くのタイルを適切に含めるためにこれを実際にどれだけ拡張できるかはわかりません。

于 2013-08-05T19:29:30.760 に答える
1

石積みのようなものを使用しない場合は、列にアイテムを展開する必要がない場合は、レイアウトを列に分割します。単純な CSS では、ラッパーと javascript を何十個も使用するか、1 つのアイテム ソリューションで終了する可能性があります。

于 2013-08-05T19:32:14.543 に答える
1

これは最新のブラウザー (IE10 を含む) で動作する はずです- http://jsfiddle.net/yqkt8/floatinline-block

.tiles {
    width: 100px;
    -webkit-column-width: 50px; -moz-column-width: 50px; column-width: 50px;
    -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;
}
.tile25x50 {
    display:inline-block;
    width: 50px;
    height: 25px;
    background-color: red;
}
.tile50x50 {
    display:inline-block;
    width: 50px;
    height: 50px;
    background-color: blue;
}
于 2013-08-09T16:12:48.903 に答える
0

.tile50x50 のスタイルを float left から float right に変更することをお勧めします。

于 2013-08-08T16:59:27.843 に答える
0

float:rightの浮動小数点値に変更します.tile50x50

.tile50x50 {
    width: 50px;
    height: 50px;
    background-color: blue;
    float: right;
}
于 2013-08-05T19:32:20.083 に答える
0

.tile50x50 css クラス値 float:left を float:rightに変更する必要があります。

ここに完全なコードがあります -

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tiles {
width :100px;
}

.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}

.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: right;

}
.clear{
clear:both;
}
</style>
</head>

<body>

<div class="tiles">
<div class="tile25x50">1</div>

<div class="tile50x50">2</div>

<div class="tile25x50">3</div>
</div>

</body>
</html>
于 2013-08-13T19:01:38.363 に答える
0

Float: right; を使用できます。しかし、それはブラウザによって異なる流れになります。1 つの行と複数の列を持つテーブルを使用します。

<table>
    <tr>
        <td><div class="tile25x50">1</div></td>
        <td><div class="tile50x50">2</div></td>
        <td><div class="tile25x50">3</div></td>
        <td><div class="tile50x50">4</div></td>
        <td><div class="tile50x50">5</div></td>
    </tr>
</table>

ここに編集を含めました

編集：

テーブルを使用したくない場合は、ここで順序付けされていないリストを試してください。

于 2013-08-05T19:38:39.457 に答える
0

私はちょうどあなたのフィドルファイルをいじってdivs、いくつかのステップで整列させることができました.

最初divに他の 2 つの間に 3 を配置します。divs

CSSの場合：

.tiles {
width :100px;
}

.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
clear: both; /* Clears both sides so the div 3 drops down */
}

.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
margin-top: -25px; /* Pushes this div back up to align with the other one */
}

これを行うためのより簡単で柔軟な方法があり、それは次のようになります。

(このオプションfloatは 25X50 タイルも削除して、スタックしやすくします。)

<div class="your-class-here"> <!-- this div will hold the two in there without having to do negative margin values -->
   <div class="tile25x50">1</div>
   <div class="tile25x50">2</div>
</div>
<div class="tile25x50">1</div>
于 2013-08-08T20:55:13.320 に答える
0

tile50x50クラスを からfloat:left;に変更するだけfloat:right;です。

.tile50x50 {
    width: 50px;
    height: 50px;
    background-color: blue;
    float: right; 
}

デモ: http://jsfiddle.net/dirtyd77/LAR3x/

于 2013-08-13T18:28:34.663 に答える
-1

このソリューションの HTML と CSS を作成します。テーブル レイアウト、float: right または position: absolute は使用しません。

HTML

<h1>Example 1</h1>
<div class="tiles">
    <div class="tile tile--one">1</div>
    <div class="tile tile--two">2</div>
    <div class="tile tile--one title--modified">3</div>
</div>
<h1>Example 2</h1>
<div class="tiles">
    <div class="tile tile--one">1</div>
    <div class="tile tile--two">2</div>
    <div class="tile tile--one title--modified">3</div>
    <div class="tile tile--two">2</div>
    <div class="tile tile--one">1</div>
    <div class="tile tile--two">2</div>
    <div class="tile tile--one title--modified">3</div>
</div>

CSS

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    margin: 40px 0;
}

.tiles {
    width: 400px;
    overflow: hidden;
}

.tile {
    text-align: center;
    float: left;
    border: 1px solid #f0f0f0;
}

.tile--one {
    background-color: rgba(255, 20, 20, .6);
    width: 200px;
    height: 100px;
}

.tile--two {
    background-color: rgba(20, 20, 255, .6);
    width: 200px;
    height: 200px;
}

.title--modified {
    margin-top: -100px;
}

お役に立てば幸いです。これはデモです

Float Div を防ぐ

デモ

于 2013-08-08T09:40:52.113 に答える
-1

ここにいる人たちがこれを理解していないなんて、本当に信じられない。なんと、合計幅が 150px の 3 つの div が、100px の幅を受け入れる単一の行に表示される可能性があります。.tiles クラスで幅を調整するだけです。

.tiles {
width :150px;
}

.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}

.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
于 2013-08-08T17:00:19.253 に答える