Question

我正在尝试创建一个网格图像，显示迷宫中的路径。

除了网格系统不分页之外，我的一切正常。

实施例

期望的结果就是这样，行之间没有空格

这是源代码（注意：当我可以正确显示时，这将由应用程序自动生成）

＆＃13;

PublishSubject.observeOn(Schedulers.trampoline());

＆＃13;

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}

＆＃13;

我试过去掉了，我得到了直线。

如何让行实际成为行？

Answer 1

Alon Eitan指出<p>标签在这里可能不是最好的。如果您可以控制标记输出，我建议将换行更改为<div>或类似的东西：

<div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block white"></div>
            <div class="block red"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block green"></div>
            <div class="block red"></div>
        </div>
        <div class="rowwrap">
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
            <div class="block red"></div>
        </div>

CSS：

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
}

.rowwrap {
  margin: 15px 0;
}

.rowwrap::after {
  content: '';
  display: block;
  clear: both;
}

.block {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.red {
    background: red;
}

.white {
    background: white;
}

.green {
    background: green;
}

因为所有的块都浮动，所以你还需要在下一行之前清除它们。我在rowwrap添加了一个伪元素来做到这一点。

摆弄工作示例：https://jsfiddle.net/zjedzyje/

<p>不添加分页符

1 个答案: