Php 压缩到我的站点部分左侧的div

在我的网站中有一个部分显示了3个文本框，下面有一个链接（下图）

我正在为更小的屏幕尺寸优化网站。当我在我的13英寸MacBookPro上打开网站时，该部分看起来像这样（下图）

我似乎不知道是什么导致了这个问题。我在下面发布与之相关的HTML和CSS。任何建议都将不胜感激

HTML:

---

您需要指定

success storie div

元素的宽度，并将它们设置为

inline block

（为了使它们水平居中，您还必须将

text align:center

添加到父元素中）

考虑以下示例HTML：

<div class="row">
    <div class="col-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices metus quis lacus suscipit pellentesque. Sed eu mollis magna. Suspendisse tristique enim a pretium tempus. In non urna ac nisl porta bibendum. Fusce pellentesque laoreet elit nec scelerisque. Curabitur dictum condimentum tincidunt. Vestibulum vitae rhoncus diam. Morbi sed dolor quis mauris posuere euismod. Nulla lobortis suscipit elementum. Donec eget volutpat urna. </div>
    <div class="col-3">Mauris vehicula dictum nibh a rutrum. Sed interdum, ex in facilisis euismod, enim ex vestibulum nulla, sit amet feugiat nisl nisi eu orci. Sed in diam et turpis ultricies sagittis. Cras molestie leo eget eros vestibulum vulputate. Donec arcu mi, efficitur vitae tincidunt efficitur, interdum in ex. Fusce lobortis, est nec scelerisque ullamcorper, urna purus luctus nibh, non sagittis dolor leo nec ipsum. Integer in mauris sit amet eros dignissim tempus.</div>
    <div class="col-3">Cras a est ultricies, mollis augue nec, blandit quam. Phasellus consectetur nibh id justo faucibus interdum quis vitae diam. Donec pellentesque neque non imperdiet viverra. Ut sit amet leo metus. Proin sit amet est enim. Etiam ornare ipsum ex, a facilisis turpis sodales a. Aenean vel sodales dui. Proin ac risus ornare, tincidunt metus vel, iaculis lectus. Aliquam a mauris turpis. Nunc diam libero, porttitor venenatis sem a, blandit volutpat metus.</div>
</div>

不要忘记列上的

vertical align:top

，这样它们就会粘在容器的顶部

您可能希望在手机上以全宽显示它们，为此，您可以使用以下媒体查询：

@media screen and (max-width: 768px) {
    .col-3 {
        display: block;
        margin: 0 0 20px;
        width: 100%;
    }
}

---

下面是一个示例。

您需要指定

成功存储div

元素的宽度，并将它们设置为

内联块

（为了使它们水平居中，您还必须将

文本对齐：居中

添加到父元素）

考虑以下示例HTML：

<div class="row">
    <div class="col-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices metus quis lacus suscipit pellentesque. Sed eu mollis magna. Suspendisse tristique enim a pretium tempus. In non urna ac nisl porta bibendum. Fusce pellentesque laoreet elit nec scelerisque. Curabitur dictum condimentum tincidunt. Vestibulum vitae rhoncus diam. Morbi sed dolor quis mauris posuere euismod. Nulla lobortis suscipit elementum. Donec eget volutpat urna. </div>
    <div class="col-3">Mauris vehicula dictum nibh a rutrum. Sed interdum, ex in facilisis euismod, enim ex vestibulum nulla, sit amet feugiat nisl nisi eu orci. Sed in diam et turpis ultricies sagittis. Cras molestie leo eget eros vestibulum vulputate. Donec arcu mi, efficitur vitae tincidunt efficitur, interdum in ex. Fusce lobortis, est nec scelerisque ullamcorper, urna purus luctus nibh, non sagittis dolor leo nec ipsum. Integer in mauris sit amet eros dignissim tempus.</div>
    <div class="col-3">Cras a est ultricies, mollis augue nec, blandit quam. Phasellus consectetur nibh id justo faucibus interdum quis vitae diam. Donec pellentesque neque non imperdiet viverra. Ut sit amet leo metus. Proin sit amet est enim. Etiam ornare ipsum ex, a facilisis turpis sodales a. Aenean vel sodales dui. Proin ac risus ornare, tincidunt metus vel, iaculis lectus. Aliquam a mauris turpis. Nunc diam libero, porttitor venenatis sem a, blandit volutpat metus.</div>
</div>

不要忘记列上的

vertical align:top

，这样它们就会粘在容器的顶部

您可能希望在手机上以全宽显示它们，为此，您可以使用以下媒体查询：

@media screen and (max-width: 768px) {
    .col-3 {
        display: block;
        margin: 0 0 20px;
        width: 100%;
    }
}

---

这里有一个例子说明这一点。

Mmmh为什么div是

display:inline

？我想看看这是否会影响它，我删除了那一行，仍然是原来的。在这段代码中，你没有告诉过

成功故事div

div应该有多宽。您应该结合使用%宽度和内联块显示。@vard您是g。把这个作为一个答案，这样我就可以把它标记为正确的。嗯，为什么div是

显示：inline

？我想看看这是否会影响它，我删除了那一行，仍然是原来的。在这段代码中，你决不会告诉

成功故事div

div应该具有的宽度。您应该结合使用%宽度和内联块显示。@vard您是g。把这个作为答案，这样我就可以把它标对。

@media screen and (max-width: 768px) {
    .col-3 {
        display: block;
        margin: 0 0 20px;
        width: 100%;
    }
}