Question

我在html / css编码方面有一定的经验，但在“旧学校”意义上更多。

我的问题：当我在两个div上使用display：inline-block时，尽管它们具有已定义的宽度和高度，但它们彼此叠加。还有很多空间可以漂浮在旁边。

非常感谢任何建议。

（我会附加文件进行查看，但它很长，非常愿意压缩并发送求助）

干杯

Answer 1

请参阅此简单示例可能有助于您解决问题。

以下是一个示例div，将其添加到您的代码库并查看输出

<style type="text/css">
        .te {
            display: inline-block;
            border: solid #0000FF 1px;
            width: 100px;
            height: 100px;
        }
    </style>

<div style="text-align: center;">
    <div class="te">
        hello
    </div>

    <div class="te">
        hello there
    </div>
</div>

演示Fiddle

Answer 2

你可以向左漂浮它们。

的CSS：

.block1 {
        display: inline-block;
        float: left;
        background-color: blue;
        width: 100px;
        height: 100px;
}

.block2 {
        display: inline-block;
        float: left;
        background-color: green;
        width: 100px;
        height: 100px;
}

HTML：

<div class="block1"></div>
<div class="block2"></div>

JSFiddle demo

使用display的问题：inline-block

2 个答案: