html - 3 div 不会在水平行中对齐

Question

我已经尝试了所有方法并查看了此处的许多相关讨论，但没有任何帮助。我正在通过 Dreamweaver 设计它，当我在 D.W 中查看设计时，所有 3 个 div 都排成一行，但在 ie 浏览器中，div 排在一列中。

HTML

      div class="container">
<div id="news" class="fluid">
  <div align="center">News</div>
    <div align="center">VOLUNTEERS THE HEART OF THE COMMUNITY<br>
    Volunteers wanted in our three charity shops in Worthing. Read more..</div>

  </div>
</div>
<div id="events" class="fluid">
<div align="center">"events"</div>   </div>
     <div id="newsletter" class="fluid">
       <div align="center"></div>
   </div>
  </div>

CSS

.container {
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
clear: none;
   }

    #news {
width: 32.2033%;
clear:none;
    background-color: rgba(232,138,12,0.57);
    }
      #events {
clear:none;
display: inline-block;
margin: 0 auto;
      width: 33.7288%;
background-color: rgba(20,18,241,1.57);
    }

   #newsletter {
background-color: rgba(16,203,225,1.57);
      width: 20.2033%;
   clear:none;

     }

网址是http://www.worthingscope.org.uk/newindex.html 任何帮助都会很棒 非常感谢。

Answer 1

首先，删除 clear: none; 任何地方；它没有做任何有用的事情。其次，正如用户 j08691 所提到的，这里有三个以上的 div，因此并不是 100% 清楚要水平对齐哪些。但是，我会假设它是那些以 .fluid 作为类的。所以你可以这样做:

.fluid {
    float: left;
}

JSFiddle Example