如何在CSS中的兩列之間放置圖像？

Question

我有這個網站：

<div> 
    <img class="image"> 
    <p class="text"></p> 
</div> 

我想我的文字被dinamically分爲兩名欄，所以我使用的column-count屬性：

p.text 
{ 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
} 

我也想中心之間的圖像兩列，在寬度和高度，以使得我得到這樣的效果：

你將如何完成這項任務？
是否有可能獲得僅適用於CSS所做的工作？
如果沒有，有沒有辦法用JavaScript來做到這一點，保持column-count財產？

Answer 1

有沒有簡單的方法來做到這一點。但是，您可以使用僞元素「僞裝」包裝效果。

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.text { 
 
    width: 49%; 
 
} 
 

 
#text-l { 
 
    float: left; 
 
} 
 

 
#text-r { 
 
    float: right; 
 
} 
 

 
#text-l:before, #text-r:before { 
 
    content: ""; 
 
    width: 125px; 
 
    height: 250px; 
 
} 
 

 
#text-l:before { 
 
    float: right; 
 
} 
 

 
#text-r:before { 
 
    float: left; 
 
} 
 

 
.image { 
 
    height: 250px; 
 
    width: 250px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -125px; 
 
    background-color: yellow; 
 
}

<div> 
 
    <img class="image" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
    <p class="text" id="text-l"> 
 
     How to create a Minimal, Complete, and Verifiable example 
 

 
When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… 
 

 
…Minimal – Use as little code as possible that still produces the same problem 
 
…Complete – Provide all parts needed to reproduce the problem 
 
…Verifiable - Test the code you're about to provide to make sure it reproduces the problem 
 
Minimal 
 
    </p> 
 
    <p class="text" id="text-r"> 
 
     The more code there is to go through, the less likely people can find your problem. Streamline your example in one of two ways: 
 

 
Restart from scratch. Create a new program, adding in only what is needed to see the problem. This can be faster for vast systems where you think you already know the source of the problem. Also useful if you can't post the original code publicly for legal or ethical reasons. 
 
Divide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear, start removing code a bit at a time until the problem disappears – then add the last part back. 
 
Minimal and readable 
 

 
Minimal does not mean terse - don't sacrifice communication to brevity. Use consistent naming and indentation, and include comments if needed to explain portions of the code. Most code editors have a shortcut for formatting code - find it, and use it! Also, don't use tabs - they may look good in your editor, but they'll just make a mess on Stack Overflow. 
 
    </p> 
 
</div>