Question

我有点困惑。我把它放在了codepen上。基本上，我使用块内联来制作一个方形div的居中网格，如果屏幕太小，它就会被包裹。

.outer{
    width: 100%;
    text-align: center;
}
.inner{
    margin: 0 auto; /* center */
}
.div{
    margin: 10px;
    display: inline-block;
    width: 300px;
    height: 300px;
}

内部div和外部div都是如此所有foo div（在内部div中，如下所示）将居中。

<div id="outer">
    <div id="inner">
        <div class="foo">
            Lorem ipsum dolor sit amet.
        </div>
        <div class="foo">
            Suspendisse at condimentum orci, nec egestas diam.
        </div>
    </div>
</div>

我很高兴，并认为这是完成工作;我所要做的只是放入内容中。就在我输入内容的时候发生了这件事。正如您所看到的，底部文本与其他foo div中的底部文本排成一行，这使得div变得格格不入。有没有办法可以使div内的文字对其位置没有影响？因此，div内部发生的事情是它自己的事情并且不会影响外面的任何事情，可以这么说。

Answer 1

您需要提供div vertical-align:top;。他们目前拥有财产vertical-align:center;

.outer{
    width: 100%;
    text-align: center;
}
.inner{
    margin: 0 auto; /* center */
}
.div{
    margin: 10px;
    display: inline-block;
    width: 300px;
    height: 300px;
    vertical-align:top;
}

如何使内联块div中的文本完全独立于div之外的任何文本？

1 个答案: