【问题标题】：Prevent float divs to start a new row. HTML & CSS防止浮动 div 开始新行。 HTML 和 CSS
【发布时间】：2013-08-05 19:26:31
【问题描述】：

我正在尝试制作一个简单的平铺网格。这是我的 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;
}

结果是：

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

jsfiddle 中的现场演示。

【问题讨论】：

我不确定您寻求什么类型的答案。您可以使用float:right 创建一个简单的不灵活 解决方案，也可以使用javascript（砌体）创建一个灵活但js 很重的通用解决方案

标签： html css tile

【解决方案1】：

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

【讨论】：

我看到了砖石，但我试图做一个更简单的解决方案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

这应该适用于现代浏览器（包括 IE10）-http://jsfiddle.net/yqkt8/ 代替float，显示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;
}

【讨论】：

【解决方案4】：

将.tile50x50的浮点值改为float:right

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

【讨论】：

你能给我们举个例子吗？我们会尽力帮助您
想象一下，如果我将 .tiles 扩展到 150 像素，然后在 50x50 磁贴的右侧再添加几个 25x25 磁贴。这行不通，因为 50x50 总是在右侧。

【解决方案5】：

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

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

我已经包含了一个编辑here

编辑：

好吧，如果您不想使用表格，请尝试使用无序列表here。

【讨论】：

我认为使用表格来构建网页并不是一个好主意，因为在构建网页时写了很多关于表格与 div 的文章。
您可以尝试使用无序列表。如果你的心是 div 的，那么使用 float:left 和 float:right。虽然，如果页面调整得太小，那么菜单可能会变得一团糟。我个人对格式正确的表格没有任何问题，而且我似乎有很多在需要时使用列表的网格。
使用表可能会做的事情，但它不是语义（它不是表的目的）。告诉使用无序列表不是解决方案，因为您将遇到与初始 @FatDog47 div 结构相同的问题。也许使用显示的 CSS（与 oldIE 不兼容）属性：table、table-cell、table-row - 但我仍然认为它的工作量太大而且兼容性不好。
vs.
真的没关系

【解决方案6】：

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

【讨论】：

请在发布前阅读现有答案。那是already suggested two days ago。无需再次发布。

【解决方案7】：

我只是在你的小提琴文件上摆弄了一下，我能够通过几个步骤来对齐 divs。

首先将div 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 */
}

有一种更简单/更灵活的方法可以做到这一点，那就是：

（此选项还会删除 25X50 瓷砖上的 float，使其更容易堆叠。）

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

【讨论】：

【解决方案8】：

只需将tile50x50 类从float:left; 更改为float:right;：

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

演示： http://jsfiddle.net/dirtyd77/LAR3x/

【讨论】：

【解决方案9】：

您必须将 .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>

【讨论】：

【解决方案10】：

请不要使用 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;
}

【讨论】：

【解决方案11】：

我建议你两个 jQuery 插件：

编辑：

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

【讨论】：

【解决方案12】：

我为此解决方案编写 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;
}

希望对你有帮助。这是演示

Demo

【讨论】：

【解决方案13】：

我真的不敢相信这里的人没有弄清楚这一点。为了地球的缘故，总宽度为 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;
}

【讨论】：

因为您所做的是将第 3 个 div 移动到第 3 列，而这里的问题是要求将第 3 个 div 直接放在第一个 div 下。