Хотите, чтобы столбцы CSS перекрывались.

Question

Я искал через Stackoverflow и нашел много людей, пытающихся избежать дублирования в столбцах CSS, но на самом деле меня спрашивают, чтобы текст и изображения перекрывались.

UPDATE:

Лучше изображение объяснить, что меня попросили сделать, и ссылку на код, я использую. Благодаря!

^{http://unfetteredletters.com/webdev/twocolumnlayout.jpg}

Ссылка на код: http://unfetteredletters.com/webdev/AF_columnLayout/AF_2columnLayout.html

Возможно ли это?

Answer 1

Вы можете сделать что-то подобное с отрицательными полями.

Проверьте это: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

#content {margin-right:-100px;} 

Answer 2

Чтобы ответить на ваш вопрос, да, это возможно.

Чтобы ответить на вопрос, который вы не задали, вы можете сделать образы фоновых изображений.

Answer 3

Вам необходимо установить содержащий блок изображений и свойство div css для отображения относительно. затем установите дочерние элементы, которые вы хотите совместить свойство отображения, как абсолютное. теперь вы можете расположить их справа и слева сверху или снизу с соответствующими пикселями. но вам действительно нужно предоставить свой стиль css, чтобы было легко дать ответ, который вы можете использовать.

Answer 4

Единственное, что я могу думать, это также использовать отрицательный запас на изображении. Но он работает, только если вы поместите первое изображение во второй контейнер и знаете высоту изображения. Так что для вашего примера это нормально, но это не решение, которое подходит для всех возможностей.

HTML

<div> 
    [TEXT] 
</div> 

<div> 
    <img src="[URL]" alt="[ALT]"> 
    [TEXT] 
</div> 

CSS

Значение height, width и margin лишь примерные значения.

div { 
    float: left; 
    width: 300px; 
    margin: 0 20px 0 0; 
    vertical-align: top; 
} 

div:nth-child(1) { 
    padding: 250px 0 0 0; 
} 

img { 
    float: left;   
    width: 350px; 
    margin: 0 0 0 -320px; 
} 

Demo

Try before buy