放大/缩小浏览器后，div内的内容不正确

Question

我在div标签中有3个div标签，我想要在同一行中。我使用了一些css，但是当我缩小/浏览器内容时会出现不同的行。 css代码：

#about{
    float:left; 
    width:33%;
}
.about-panel{
    width:100%;
}

html代码：

<div class="about-panel">
  <div id="about">
   <p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
  </div>
  <div id="about">
    <p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
  </div>
  <div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
  </div>
</div>

即使放大/缩小后，我也希望所有内容都在同一行中

我如何需要对齐内容

Answer 1

jsfiddle本来不错，但暂时不要试试你display:inline-block; about-panel。由于display最有可能错过div类型而导致错误!!

.about-panel{
   width:100%;
   display:inline-block; /* add this and check*/
 }
 #about{
   float:left; 
   width:33%;
 }

Answer 2

只能有一个id ..将“about”更改为class ..这应该有效！