CSS가있는 다중 열 레이아웃 상단의 이미지

Question

두 열 레이아웃 (CSS 다중 열 레이아웃 모듈 사용)이 있는데 두 번째 열의 맨 위에 이미지가 있어야합니다. 나 자신이 이미지를 놓아야 텍스트가 틈이 생길 곳에 있도록해야 할 것 같습니다.

문제는 열이 균등하게 채워지 길 원합니다.

JavaScript를 사용하지 않고이 문제를 해결할 수있는 방법이 있습니까? 이것은 이미지 대신 div를 사용하지만 아이디어는 빨간 블록을 그 열의 맨 위에 놓는 것입니다.

.col-2 { 
 
    -webkit-column-count:2; 
 
    -moz-column-count:2; 
 
    column-count:2; 
 
    width:800px; 
 
} 
 

 
.block { 
 
    width:100%; 
 
    height:100px; 
 
    background-color:red; 
 
}

<div class="col-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit neque sed eros posuere molestie. Quisque mattis ante ac mauris iaculis semper vehicula nibh condimentum. Pellentesque scelerisque euismod metus a sodales. Praesent dolor nisl, consectetur at tincidunt eu, dapibus at orci. Etiam congue metus id sapien rutrum euismod. Proin porttitor rhoncus hendrerit. Phasellus pellentesque venenatis felis a eleifend. Suspendisse pretium placerat hendrerit. Praesent tempus risus in ligula condimentum egestas. Vivamus vitae nunc massa, luctus egestas lectus. Vivamus at turpis sed nisl molestie vulputate. Vivamus nec tortor et ante consectetur dignissim ac in odio. Cras et nisl non enim congue scelerisque. Curabitur in condimentum eros. Curabitur vehicula augue id neque dignissim vitae venenatis nisi feugiat. 
 

 
Curabitur tristique ullamcorper neque, ac sodales eros suscipit eu. Nulla pretium accumsan lacus, non fermentum felis lacinia mattis. Sed quis turpis eros. Nullam ut turpis libero. Nam quis magna ac tortor elementum pulvinar. Quisque rutrum eleifend elit, eget consectetur nulla dapibus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean rhoncus commodo tellus, sit amet pulvinar mi vehicula non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mollis dignissim felis, et posuere quam molestie nec. Duis sit amet pulvinar dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut lorem justo, lobortis id imperdiet nec, lobortis varius mauris. Nullam sit amet nulla arcu. Nullam ornare posuere leo vitae rhoncus. 
 

 
Sed venenatis dui sapien. Praesent sed enim lacus, vitae venenatis metus. Aenean bibendum nibh a risus scelerisque blandit. Maecenas nibh enim, pulvinar in interdum quis, rhoncus ut orci. Vestibulum a ullamcorper ante. Nulla facilisi. Pellentesque placerat ullamcorper diam at mattis. Aliquam posuere suscipit metus sed sollicitudin. Phasellus in quam odio, ac scelerisque purus. Morbi at nunc odio, nec aliquam urna. Proin mi orci, varius vitae dapibus ac, consequat id purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a dui lectus, ut congue nunc. Cras diam tortor, auctor in vehicula vitae, egestas eget neque. In nisi odio, laoreet a convallis in, varius at risus. 
 
    <div class="block"></div> 
 
</div>

는

Answer 1

CSS3 사양에는 "열 나누기"스타일이 있지만 Webkit에만 구현되었습니다. 그것은 당신이 찾고있는 것을 정확하게 할 것이지만, Safari와 Chrome에서만 슬프게도 할 것입니다.

다음과 같은 스타일 콘텐츠의 정상적인 흐름 내에서 열 차단 요소 가을이 있고, 추가해야

:

div.block { 
    width: 100px; /* this shouldn't be more than your column width */ 
    height: 100px; 
    -webkit-column-break-before: always; 
} 

Example (View in Safari/Chrome)

http://css-infos.net/property/-webkit-column-break-before

http://www.w3.org/TR/css3-multicol/#column-breaks

Answer 2

당신은 다른 사업부에있는 두 개의 div의 포장 및 마크 업에서 .col-2 DIV 전에 .block 사업부를 가질 수 있습니다.

Example for you here.

Answer 3

내가하는 일을 이해한다면 (div 또는 이미지를 모든 열로 가득 채우십시오) CSS로이 작업을 수행하는 방법은 column-span : all을 지정하는 것입니다. 전체 너비에 걸 치려는 요소 (img 또는 div)에 이것은 현재 Opera에서만 지원되며 내부 빌드에서만 지원됩니다 (곧 출시 될 예정입니다).

컬럼 스팬을 사용하지 않으면 스크립트를 사용하거나 열 수를 적용한 요소 외부에 마크를 이동해야합니다.