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

3个div不会在水平行中对齐

1 个答案: