列和内嵌中心图像

我想创建一个 2 个文本列，中间有一个 div，如下所示。

我正在使用这段代码：

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

当我在 div 类中放置另一个 div 时，它会格式化为两列。我该如何解决？

使用以下 CSS：

 <style type="text/css">
  .container{ background:#00FF00;width: 844px;text-align:center; margin: 0px auto;border: 1px solid #CCCCCC;height: 450px;}
  .columns {background:#FF0000; width: 400px;border: 1px solid #595959; height: 450px;text-align:left;float:left; padding: 10px;left:5%;}
  .popup_middle_content{background:#FFFFFF; border: solid 1px black; position: absolute; left: 50%; top: 50%;background-color: white;z-index: 1; height: 50px; margin-top: -150px; width: 200px;margin-left: -100px; }
</style>

并检查以下这些 div：

  <div class="container">
       <div  class="columns">Left Paragraph contents...</div>
       <div  class="columns">Right Paragraph contents...</div>
       <div  class="popup_middle_content">CENTER DIV content...</div>
  </div>

这对我有用。我希望这对你有帮助。