css - Zurb 基础柱宽度不起作用

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

我有以下代码片段,其中列的宽度应该有效,但不知何故它没有发生,并且带有列类的两个 div 都在下一行。

<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>  
</head>

<body> 

    <div class="row">
        <div class="large-8 columns"> Hello </div>
        <div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
    </div>

</body> 

</html>

最佳答案

你的 foundation.min.css链接需要有一个 rel="stylesheet"属性来指定它是一个样式表关系。否则它不会被用作一个。 您还缺少结束语 </div>在你的 large-8列线。

<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="small-2 columns"> Hello </div>
      <div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
    </div>
  </body>

</html>`

关于css - Zurb 基础柱宽度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32242121/

相关文章:

html - 一个站点可以有多个 SCSS 文件 [foundation]

html - 文本不环绕一些 float 图像,在 IE 和 FF 中环绕,但在 chrome、safari 中不环绕

css - 悬停时 Chrome 边框半径错误

html - 在可选择的文本/链接上绝对定位的 div

html - block 元素会忽略 float 元素吗?

jquery - $(sel).html 和 dom.innerHTML 的区别

html - Web Font Loader 不缓存字体吗?

Javascript - 如何将文本转换为图像

jquery - 议程 View 中的全日历边界问题

css - Foundation 导航栏中的垂直对齐文本