不包含文本的列答案

【问题标题】：Columns not containing text不包含文本的列
【发布时间】：2020-03-19 22:06:00
【问题描述】：

我正在使用 Zurb Foundation 列并试图将我的段落文本包含在列中，但它显示在屏幕上，我不确定为什么会发生这种情况，它可以通过填充和/或边距修复但这会在更大的屏幕尺寸上造成问题。

问题部分是页面下方的威士忌部分。有什么想法吗？

谢谢

CSS：

#newwhiskeylp p {
color: #f9f8fd; 
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 300;
line-height: 2.8rem;
text-align:center;
margin-left:auto;
margin:right:auto;
margin-top:-50px;
display:block;
}

HTML：

<div class="small-12 medium-12 large-12 columns" id="whiskeywide">
    <div class="small-12 medium-offset-6 medium-6 large-offset-2 large-10 
    columns" id="newwhiskeylp"><img class="whiskeytitlelp" src="<?php 
    bloginfo('template_url');  ?>/Images/GOOD-WHISKEY-TITLE-D.png">
        <p>The finest range of Irish whiskeys rich in flavour and aromas, 
        aged to blossom fully to deliver a well seasoned Irish take on 
        perfection.
        <a style="color:#FFEB7F;" href="http://rowandesign.info/whiskey- 
        menu-lp/">Read more</a>
        </p>
    </div>
</div>

【问题讨论】：

你应该把你的代码放在这里看看问题。
现在添加代码，谢谢
你需要去检查你的 CSS 错误，那里有很多乱七八糟的东西。 jigsaw.w3.org/css-validator/…
感谢您的链接。我尽可能多地清理代码
好的，直到现在还无法检查，但代码清理看起来有效 - 感谢您的帮助。

标签： css zurb-foundation paragraph

【解决方案1】：

试试这个：

<div class="grid-container">
      <div class="grid-x grid-padding-x">
    <!-- <div class="small-offset-1 small-10 medium-offset-4 medium-6 large-offset-6" id="newwhiskeylp"> -->
    <div class="float-center  small-10  medium-6 large-6">

      <!-- grid-container will keep everything off the edges.
      the grid is 12 columns wide.
      small-offset-1 create a one column space then only 10 columns of text
      same logic with the medium and large offsets.  -->

        <p>The finest range of Irish whiskeys rich in flavour and aromas,
        aged to blossom fully to deliver a well seasoned Irish take on
        perfection.
        <a style="color:#FFEB7F;" href="http://rowandesign.info/whiskey-
        menu-lp/">Read more</a>
        </p>
    </div>
</div></div>

【讨论】：