列和內嵌中心圖像

Question

我想創建一個2文本列與中心像下面的div。當我把股利類中的另一個div它格式化進入兩列

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

：

我使用這個代碼。我該如何解決？

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

嘗試爲所有內容創建單獨的Div類，並將div類定位到您想要的位置。不要創建Div標籤，只需創建類！

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

回答這個你保持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 5

我想你很長一段時間了，但我有一個例子可能證明是有用的。這裏有一些細微的差別，我不想解釋，除非有人問。我認爲，通過一些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