列和内联中心图像答案

【问题标题】：Columns and Inline Center Image列和内联中心图像
【发布时间】：2013-11-15 12:00:06
【问题描述】：

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

我正在使用此代码：

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

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

【问题讨论】：

您能给我们提供一个 jsfiddle 或一些代码，以便我们看到您付出的努力吗？
我知道我可以使用这样的东西.. jsfiddle.net/aX47K
但我真的很想坚持使用 -moz-column-count:3; -webkit 列数：3；列数：3；而且我似乎无法弄清楚如何做到这一点..我这样做的原因是因为我喜欢列数如何很好地格式化文本并保持列的高度相同。
对于那个小提琴和你提供的图像，在小提琴中他们有 text-align left 不关心右边缘。如果你使用text-align: justify;，你会得到像图片中那样清晰的段落。
我会使用您提供的小提琴中的内容，jsfiddle.net/aX47K/93。我添加了合理的文本对齐，这似乎是你想要的。

标签： html css

【解决方案1】：

我想你早就完成了这个，但我这里有一个例子，它可能会被证明是有用的。这里有一些细微差别，除非有人问，否则我不想解释。我认为通过一点 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

【讨论】：

【解决方案2】：

你需要为

创建一个单独的类

看看下面的例子

<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>

【讨论】：

【解决方案3】：

回答您保留 css 列的请求。

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

看看你的这个更新的小提琴：http://jsfiddle.net/aX47K/99/

诀窍是在每一列（由div表示）上使用css :before或:after伪元素，宽度和高度固定，浮动对面。这将创建一个虚拟空间，然后我们可以使用绝对定位填充我们的图像（或另一个 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%;
}

但是，请注意，这种方法仍然是一种 hack。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：