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个浮动div

我的问题是如何防止第三个 div 插入新行并填补空白？

jsfiddle中的现场演示。

4

13 回答 13

1

如果您将 .tile50x50 更改为float:right，则可以，但我不确定这可以真正扩展多少以正确包含更多图块。

于 2013-08-05T19:29:30.760 回答
1

如果您不需要扩展列中的项目，则在列中拆分布局，如果不使用类似masonry的东西。在简单的 CSS 中，您可能会以几十个包装器和 javascript 或单项解决方案结束。

于 2013-08-05T19:32:14.543 回答
1

这应该适用于现代浏览器（包括 IE10） - http://jsfiddle.net/yqkt8/ 而不是float, display inline-block，然后使用 css 列。

.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

你可以使用浮点数：对；但这在不同的浏览器上会有所不同。我会使用一个有一行和多列的表

<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在几个步骤中对齐。

首先将div3 放在另外两个之间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 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

我建议将 .tile50x50 的样式从左浮动更改为右浮动。

于 2013-08-08T16:59:27.843 回答
0

请不要使用 Jquery 或使用负边距之类的技巧。HTML/CSS 就好了:)

根据任何进一步的布局要求，您可以执行以下两项操作之一：

1）只需从“.tiles”容器中删除 50px 块，将它们中的每一个向左浮动并将“.tiles”的 100px 宽度限制更改为 50px

fiddle.net/HHeSW/3/

HTML

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

CSS

.tiles {
    float: left;
    width:50px;
}

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

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

2) 为每列添加一个容器 div。您可以为这些重用相同的列类，甚至放弃对“.tiles”和列类的宽度限制，以提高未来的灵活性:)

http://jsfiddle.net/wurwH/3/

HTML

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

CSS

.tiles {
    width:100px;
}

.column{
    float:left;
}

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

.tile50x50 {
    width: 50px;
    height: 50px;
    background-color: blue;
}
于 2013-08-14T06:02:05.000 回答
0

更改为float:right浮点值.tile50x50

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

我会建议你两个 jQuery 插件：

编辑：

查看我的 cssdeck：http ://cssdeck.com/labs/ojo7uw0l

于 2013-08-08T12:17:05.997 回答
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。我不使用表格布局，浮动：右或位置：绝对。

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;
}

我希望它可以帮助你。这是演示

防止浮点数

演示

于 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 回答