两个css3列文本与中间的图像 [英] Two css3 columns text with an image in middle

问题描述

我想实现这个结果

有许多教程像这样，但他们使用固定的文本和列。我以这种方式在我的两个列布局中打印可变长度的文本

there are many tutorial around like this but they work with a fixed text and columns. I print a variable-length text inside my two column layout in this way

#cols {
column-count: 2;
column-gap: 20px;
}

<div id="box">
  <p id="cols">
    Lorem Ipsum....
  </p>
</div>

所以我不能使用像这样的技术，这个方案？

so I can't use a technique like that, how can I put an image in the middle in this scenario?

推荐答案

这里是：

http://jsfiddle.net/aX47K/

css：

.column{  
   width:300px;  
   float:left;  
   margin-right:20px;  
} 

.column div{  
  width:200px;  
  height:210px;  
}

#col-1 div{
  float:right;
}
#col-2 div{
 float:left;
} 

img#center-image{  
  position:absolute;  
  left:110px;
}

这篇关于两个css3列文本与中间的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！