Question

我有一个非常独特的问题，只有当字体大小低于某个级别时才会出现。以下是我正在使用的代码，它提供了我正在尝试实现的示例：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 18px;
                height: 18px;
                background-color: black;
                border: 1px solid blue;

                clear: both;
                display: inline-block;
                vertical-align: top;
                color: red;
                text-align: center;

                font-size: 10px;

                line-height: 18px;
            }
        </style>
    <head>
    <body>
        <div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div><br><div></div><div></div><div></div><div></div><div></div><div></div><div></div>    
    </body>
</html>

这完全符合我的要求 - 并排div，每个内部都有一个字符。但是，如果我试图将其缩小到12x12的div大小，则在每个行之间会出现间隙，这是我无法承受的。我可以用什么技巧来获得我想要的输出？

我的意思是“缩小”：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 12px; /* change made here */
                height: 12px; /* change made here */
                background-color: black;
                border: 1px solid blue;

                clear: both;
                display: inline-block;
                vertical-align: top;
                color: red;
                text-align: center;

                font-size: 10px;

                line-height: 12px; /* change made here */
            }
        </style>
    <head>
    <body>
        <div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div><br><div></div><div></div><div></div><div></div><div></div><div></div><div></div>    
    </body>
</html>

Answer 1

我提出了以下有效的方法：

http://jsfiddle.net/gfbxrgum/

将行包裹在一个会破坏的元素中。我刚创建了一个块级跨度，可以清除它们。
浮动div并设置为none。

CSS

div {
    width: 12px; /* change made here */
    height: 12px; /* change made here */
    background-color: black;
    border: 1px solid blue;

    clear: none;
    display: block;
    float:left;
    vertical-align: top;
    color: red;
    text-align: center;

    font-size: 10px;
    line-height: 12px; /* change made here */
}
span {
    display:block;
    clear:both;
}

HTML

<span><div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div></span><span><div></div><div></div><div></div><div></div><div></div><div></div><div></div></span>

Answer 2

你的风格没什么问题。你的Div之间有一个'br'标签。删除它，它会像魅力一样工作。 :-D

如果您仍需要换行，请参阅SO中的this主题

如何确保div之间永远不会有空间？

2 个答案: