CSS를 사용하는 양면 페이지 레이아웃

-1

CSS를 사용하여 XHTML에서 신문 페이지를 설정하는 방법이 궁금합니다.CSS를 사용하는 양면 페이지 레이아웃

XHTML의 내용이 신문 레이아웃처럼 두 개의 열로 나누어 지도록 CSS을 사용하는 방법은 무엇입니까?

2014-09-25 waghso

무엇을 이미 시도 했습니까? – DavidT

[CSS Columns] (https://developer.mozilla.org/en-US/docs/Web/CSS/columns)와이 [Responsive-Friendly CSS Columns 안내] (http : // css- tricks.com/guide-responsive-friendly-css-columns/) – Moob

지금까지 해보신 바는 무엇입니까? 코드를 입력하십시오. –

이렇게 할 수 있습니다 CSS Columns. 그들은 don't have great support in anything but the newest browsers이지만 이전 브라우저에는 JS Polyfill을 사용할 수 있습니다.

CSS-Tricks.com은 훌륭한 Guide to Responsive-Friendly CSS Columns가 있지만 여기 TL이다; DR 버전을 개념의 증거로 :

article { 
 
    -webkit-columns: 3 200px; 
 
    -moz-columns: 3 200px; 
 
    columns: 3 200px; 
 
} 
 
article p { 
 
    margin-bottom:1.5em; 
 
}

<article> 
 
<p>Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis.</p> 
 
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
 
<p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla.</p> 
 
<p>Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.</p> 
 
</article>

출처

2014-09-25 12:10:58 Moob

그게 내가 누리고있는 일이야. 감사. – waghso

#의 COL1를 {사용 플로트 : 왼쪽; } 및 # col2 {float : left; margin-left : 25px; }이 효과를 줄 것이며 IE9 이하에서 작동합니다.

출처

2014-09-26 08:44:01 tommydevs

CSS를 사용하는 양면 페이지 레이아웃

답변

관련 문제