html - 基础 5 列

标签 html css zurb-foundation zurb-foundation-5

我希望两个文本 block 位于同一行并占用相同的空间。我给了 div 类 small-6、medium-6 和 large-6(最初它应该是 small-12,但为了修复它我把它改为 6)。

它仍然看起来像这样http://prntscr.com/9ej39s我似乎无法修复它。

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>


    <div class="row about">
        <div class="small-6 medium-6 large-6 colums panel">
            <a name="about" href="">
                <h1>About</h1>
            </a>
            <p class="justify">Bacon ipsum dolor amet spare ribs capicola cupim beef porchetta fatback kielbasa corned beef doner short loin sausage meatball boudin rump. Jerky ribeye pancetta drumstick spare ribs turducken kevin fatback tenderloin bacon prosciutto corned beef ball tip pig strip steak. Brisket tail picanha pork tenderloin, doner cupim sausage salami venison pork loin turkey tongue ham fatback. Kielbasa salami pork, turkey tongue brisket prosciutto pork belly andouille pancetta leberkas kevin frankfurter venison shankle. Strip steak ball tip venison sausage beef ribs. Tri-tip pork chop hamburger, frankfurter meatball tail flank doner pork belly.</p>
        </div>

        <div class="small-6 medium-6 large-6 colums panel">
            <a name="howtouse" href="">
                <h1>How to use?</h1>
            </a>
            <p class="justify">Bacon ipsum dolor amet spare ribs capicola cupim beef porchetta fatback kielbasa corned beef doner short loin sausage meatball boudin rump. Jerky ribeye pancetta drumstick spare ribs turducken kevin fatback tenderloin bacon prosciutto corned beef ball tip pig strip steak. Brisket tail picanha pork tenderloin, doner cupim sausage salami venison pork loin turkey tongue ham fatback. Kielbasa salami pork, turkey tongue brisket prosciutto pork belly andouille pancetta leberkas kevin frankfurter venison shankle. Strip steak ball tip venison sausage beef ribs. Tri-tip pork chop hamburger, frankfurter meatball tail flank doner pork belly.</p>
        </div>
    </div>

最佳答案

答案:问题是您拼错了 columns 类。

旁注:您不需要添加 medium-6large-6 类。如果您有 small-6 并且从 small 开始的所有列都将相同,那么这就是您所需要的。

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>


    <div class="row about">
        <div class="small-6 columns panel">
            <a name="about" href="">
                <h1>About</h1>
            </a>
            <p class="justify">Bacon ipsum dolor amet spare ribs capicola cupim beef porchetta fatback kielbasa corned beef doner short loin sausage meatball boudin rump. Jerky ribeye pancetta drumstick spare ribs turducken kevin fatback tenderloin bacon prosciutto corned beef ball tip pig strip steak. Brisket tail picanha pork tenderloin, doner cupim sausage salami venison pork loin turkey tongue ham fatback. Kielbasa salami pork, turkey tongue brisket prosciutto pork belly andouille pancetta leberkas kevin frankfurter venison shankle. Strip steak ball tip venison sausage beef ribs. Tri-tip pork chop hamburger, frankfurter meatball tail flank doner pork belly.</p>
        </div>

        <div class="small-6 columns panel">
            <a name="howtouse" href="">
                <h1>How to use?</h1>
            </a>
            <p class="justify">Bacon ipsum dolor amet spare ribs capicola cupim beef porchetta fatback kielbasa corned beef doner short loin sausage meatball boudin rump. Jerky ribeye pancetta drumstick spare ribs turducken kevin fatback tenderloin bacon prosciutto corned beef ball tip pig strip steak. Brisket tail picanha pork tenderloin, doner cupim sausage salami venison pork loin turkey tongue ham fatback. Kielbasa salami pork, turkey tongue brisket prosciutto pork belly andouille pancetta leberkas kevin frankfurter venison shankle. Strip steak ball tip venison sausage beef ribs. Tri-tip pork chop hamburger, frankfurter meatball tail flank doner pork belly.</p>
        </div>
    </div>

关于html - 基础 5 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34295962/

相关文章:

javascript - 如何使用 CSS 伪元素修复 IE 对换行符的支持?

html - 单个居中列上的人造列的替代品

css - 未在 Chrome 中指定 CSS 宽度导致 Div 调整大小问题

css - 你能在 Zurb Foundation 的同一个 css 标签中定义一行和一列 mixin 吗?

javascript - 如果我有多个打开相同模式弹出窗口的链接,则 Foundation Reveal 会出现问题

html - 我如何将事件侧边栏的内容居中

javascript - jQuery 多重切换

javascript - 由于淡入淡出/补间错误,Fancy Upload 不适用于 mootools 1.4.1

CSS 样式不适用于具有类的元素

javascript - 将复选框限制为仅三个复选框 - 如何?