Question

这是标记：

<div class="test">
  // These links are added with JavaScript
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>

这是我的CSS：

a {
  display: inline-block;
  float: left;
  // Other properties
}

.test {
  display: block;
}

我的问题是div和标题并排显示。但是，我希望标题显示在div下面。

我认为使用display:block会解决问题，但事实并非如此。我尝试在<br>之后添加div标记，但这也不起作用。有一件事是在.test上设置一个高度。这样做的问题是，其他一些用户可能会设置更高的字体大小，因此，（在容器上设置的高度无法用于其他地方的链接）这会弄乱布局。

编辑：

我刚刚控制了div及其中的元素。 div上方或下方可以有任何东西。标题仅供参考。

JSFiddle

Answer 1

您可以使用float:left; clear:left

Answer 2

HTML

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>
UI am header
</h1>

CSS

.test {
      width:100%;
    }

jsfiddle

Edited JSFiddle

Answer 3

基本上，您有两种选择：

让.test建立新的块格式化上下文，例如与overflow: hidden。

这将使它垂直增长以包含浮点数，然后浮点数不会影响标题，因为它将位于它们之下。

.test {
  overflow: hidden;
}

.test {
  overflow: hidden;
}
a {
  text-decoration: none;
  font-size: 1.3em;
  padding: 10px 10px 5px 10px;
  margin: 10px 3px;
  display:inline-block;
  float: left;
  width: 60px;
  text-align: center;
}

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>UI am header</h1>

清除标题。这将迫使它被放置在浮子下方。

h1 {
  clear: left;
}

h1 {
  clear: left;
}
a {
  text-decoration: none;
  font-size: 1.3em;
  padding: 10px 10px 5px 10px;
  margin: 10px 3px;
  display:inline-block;
  float: left;
  width: 60px;
  text-align: center;
}

<div class="test">
  <a href="fijf">Text 1</a>
  <a href="dfugru">Text 2</a>   
</div>
<h1>UI am header</h1>

Answer 4

你需要清理你的花车。

.test::after { content: ''; display: table; clear: both; }

https://jsfiddle.net/L5qz7y2p/3/

使元素移动到div下方而不在div上设置高度

4 个答案: