Question

反正是否允许浮动元素超过其前一个兄弟元素？例如，采用以下标记：

<article class="main-article">

  <header class="article-header">
    ...
  </header>

  <section class="article-messages">
    ...
  </section>

  <section class="article-info-box">
    ...
  </section>

  <div class="article-content">
    ...
  </div>

  <aside class="article-sidebar">
    .
  </aside>

  <footer class="article-footer">
    ...
  </footer>

</article>

使用这个CSS：

.main-article {
  position: relative;
  width: 100%;
}
.article-header,
.article-messages,
.article-content,
.article-footer {
  position: relative;
  float: left;
  width: 75%;
  clear: left;
  margin-right: -100%;
}
.article-info-box,
.article-sidebar {
  position: relative;
  float: right;
  width: 25%;
  clear: right;
}

这将形成两列，左侧是.article-header，.article-messages，.article-content和.article-footer，右侧是.article-info-box和.article-sidebar。但是，.article-info-box永远不会超过.article-messages的顶部，即使该空间中没有任何内容。同样，.article-sidebar永远不会超过.article内容。

有没有办法让.article-info-box一直浮到它的容器顶部，.main-article，所以它与.article-header的顶部对齐，带有.article-sidebar漂浮在它下面？

请注意，无法更改源订单。另请注意，这些元素都不能具有固定的高度。

Answer 1

您的信息框未显示在顶部的原因是您的层次结构。在这种情况下，您要做的是将信息框放在标题后面，这是因为标题宽度为75％，信息框宽度为25％，它将填满剩余空间。这里是你为这个实例编写HTML代码的方式，你的CSS很好，只需摆脱边距：-100％。

<head>
<style>
.main-article {
position: relative;
width: 100%;
}
.article-header,
.article-messages,
.article-content,
.article-footer {
 position: relative;
 float: left;
 width: 74%;
 clear: left;
}
.article-info-box,
.article-sidebar {
 position: inherit;
 float: right;
 width: 25%;
 clear: right;
}
</style>
</head>
<body>
<article class="main-article">

<header class="article-header">
 <h1>TEST</h1>
</header>

<section class="article-info-box">
 <h2>right-article-info-box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p>
 </section>

 <section class="article-messages">
   <h2>left-article-messages</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p>
 </section>


 <div class="article-content">
  <h2>left-article-content</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p>
  </div>

 <aside class="article-sidebar">
   <h2>right-article-sidebar</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p>
  </aside>

  <footer class="article-footer">
   <h2>left-article-footer</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p>
  </footer>

  </article>
  </body>
</html>

如何浮动元素高于其前一个兄弟？

1 个答案: