列和内联中心图像

Question

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

我正在使用此代码：

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

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

Answer 1

使用以下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>

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

Answer 2

回答您关于保留css列的请求。

根据@Josh的建议，从这里接受了这个想法：http://css-tricks.com/float-center/。

请参阅此更新的小提示： http://jsfiddle.net/aX47K/99/

诀窍是在每列上使用css :before或:after伪元素（由div表示），具有固定的宽度和高度并且相反地浮动。这将创建一个虚拟空间，然后我们可以使用绝对定位填充我们的图像（或另一个div）。

/* the overall wrapping div acting as newspaper */
div.paper { position:relative; }

/* the div holding the columns */
div.wrap {
    column-count:2;
    text-align: justify;
}

/* the dummy space created from individual divs holding the content */
#col-1:before, #col-2:before { 
  content: ""; 
  width: 140px; 
  height: 160px; 
}
#col-1:before { 
  float: right; 
}
#col-2:before { 
  float: left; 
}

/* the image will then be placed in the dummy space created above */
img {
    width: 240px;
    position:absolute;
    top: 10%; left: 33%;
}

但请注意，这种方法仍然是一种黑客行为。

Answer 3

您需要为

创建一个单独的类

请查看以下示例

<div class="newspaper">enter code here
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod     tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis     nostrud exerci tation ullamcorper suscipit lo`enter code here`bortis nisl ut aliquip ex ea     commodo consequat. Duis autem vel eum iriure dolor in 
</div>
<div class="newspaper"> 
Typi non habent claritatem insitam; est usus legentis in iis     qui facit eorum     claritatem. 
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
<div class="">
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.  
 Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</div>

Answer 4

我想你已经完成了很长时间，但我在这里有一个可能证明是有用的例子。这里有一些细微差别，除非有人问，否则我不想解释。我认为只需轻轻一点jQuery即可。

这是我的小提琴示例。它也是响应式的，所以你可以扩展窗口看到它。再一次，它很快就完成了。如果您选择响应式容器，只需查找微妙的断点。

img {
width:auto;
height:5em;
}

#right img {
    padding:1.5em 1.5em 1em 0;   
}

#left img {
    padding:1.5em 0 1em 1.5em ; 
}

#right {
    float:left;
    margin-left:-5.5em;
}

#left {
   float:right; 
margin-right:-5.5em;
}

Fiddle

Answer 5

尝试为所有内容创建单独的Div类，并将div的div类放在div所需的位置。不要创建Div标签，只需创建类！