Question

我正在尝试设置页面http://techno-french.com/french-news-room的样式，对于我的生活，我无法弄清楚为什么H1标题，

使用Mots de L'actu免费在线学习法语

被它上方的右浮动div部分遮挡。我已经尝试在上面的Div上放置2em的下边距，然后尝试将上边距放在包含标题的Div上。它在Dreamweaver之外的WordPress中工作正常，所以我怀疑CSS是正确的，但在WordPress中，标题在它上面的Div下滑动。我不是专家，但这似乎编码正确：

以下是代码：

<div style="float: left; width:360px; height:467px;">
   <h2 style="text-align: center;">Top Stories: Le Progres</h2>
   [WordPress shortcode for an advanced iFrame]
</div>
<div style="float: right; width:517px; height:560px; margin-bottom: 2em;">
   <h2>Funny Helps Learning</h2>
   [WordPress shortcode for an advanced iFrame}
</div>
<div style="float: left; clear: both;">
   <h1 style="text-align: center; color: #0b00dd;">Learn French Online 
      Free with Mots de  L'actu
   </h1>
   TEXT
</div>

Answer 1

将左右浮动div包裹到另一个div并添加clearfix。它应该工作正常。

<div id="wrapper" class="clearfix">
   <div style="float: left; width:360px; height:467px;">

   <h2 style="text-align: center;">Top Stories: Le Progres</h2>

   [Wordpress shortcode for an advanced iFrame]

   </div>

   <div style="float: right; width:517px; height:560px; margin-bottom: 2em;">

   <h2>Funny Helps Learning</h2>

   [Wordpress shortcode for an advanced iFrame}

   </div>
</div>

<div style="float: left; clear: both;">

<h1 style="text-align: center; color: #0b00dd;">Learn French Online 
Free with Mots de  L'actu</h1>

TEXT

</div>

CSS：

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 2

<div id="ai-div-news7">的父级div设置为高度560px，但#ai-div-news7以上<h2>迫使#ai-div-news7失效。

请查看该网站的控制台，并访问validator.w3.org。

将<div style="float: right; width:517px; height:560px; margin-bottom: 2em;">更改为<div style="float: right; width:517px; margin-bottom: 2em;">可解决问题。

为什么标题藏在前面的div元素之下？

2 个答案: