Question

我尝试在干净的页面中运行基本示例。默认情况下，我的内容框位于右侧而不是步骤按钮下方：

以下是代码：

<html>
<head>
  <title>Demo</title>
  <script src="Scripts/jquery-1.10.2.js"></script>
  <script src="Scripts/jquery.steps.js"></script>
  <link href="Content/jquery.steps.css" rel="stylesheet" />
</head>
<body>
  <div id="wizard">
    <h1>First Step</h1>
    <div>First Content</div>

   <h1>Second Step</h1>
   <div>Second Content</div>
  </div>

    <script>
      $("#wizard").steps();
  </script>
</body>
</html>

在外部内容div上设置了溢出，但是当我遇到一个非常简单的向导问题时，我很想深入研究这个问题。我希望文档中遗漏了一个必需的容器。

Answer 1

I figured it out. The code is applying a clearfix class but either the author intends you to supply your own or neglected to include it in the css. I ended up taking it out of his demo "main.css" in github:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

https://raw.githubusercontent.com/rstaib/jquery-steps/master/demo/css/main.css

jquery步骤 - 内容浮动权利

1 个答案: