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

我在一个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>

`

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

我需要如何对齐内容

---

一个JSFIDLE本来是不错的，但目前，请尝试

display:inline block在您的
关于面板
。由于缺少
display
类型的
div
很可能会导致它出现问题

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

只能有一个id。。将“about”改为class。。那应该行
 JSIDLE链接会很好。嗨，阿里，这里的图片和视频都在一个div下，所有3个都是内联的，但当我按下ctrl+-它们会像图片中显示的那样，图片中有什么问题，这就是我想知道的？我需要玩你的代码，JSIDLE链接会很好。为什么你有三个元素具有相同的
id
？，但是这里的内容是内联的，你仍然可以看一看代码…我没有理解你…你的问题是内容越界了…对吗？？？现在即使在zoom上，他们也会排队……或者我遗漏了什么？现在我得到了高达80%的满意修复，谢谢，伙计，，，，我会批准你的答案。