CSS - 플로팅 섹션 좌우측, 반응 형 디자인

기사의 일부 섹션이 더 큰 중단 점의 오른쪽 열에 표시되는 반응 형 레이아웃을 만들려고합니다. 각 열의 섹션은 서로 겹쳐 져야합니다.CSS - 플로팅 섹션 좌우측, 반응 형 디자인

내가 겪고있는 문제는 상자 4가 반대쪽 상자 3에 나타나서 오른쪽 열의 상자 2에서 원하지 않는 간격을 만드는 것입니다. div 요소

.wrapper { 
 
    width: 400px; 
 
} 
 
.section { 
 
    width: 50%; 
 
} 
 
.left { 
 
    float: left; 
 
    clear: left; 
 
    background-color: #E26A6A; 
 
} 
 
.right { 
 
    float: right; 
 
    clear: right; 
 
    background-color: #DCC6E0; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="section left">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor</div> 
 
    <div class="section right">2</div> 
 
    <div class="section left">3</div> 
 
    <div class="section right">4</div> 
 
    </div> 
 
</body>

출처

2014-11-27 Beezer900

당신이 마크 업을 변경할 수 있습니까? 마크 업에서 각각의 왼쪽 요소를 의미합니까? –

그렇지 않으면 다음을 참조하십시오. http://stackoverflow.com/questions/26985139/is-it-possible-to-stack-unlimited-divs-left-or-right-arbitrarily-without-a-wrapp –

내 예에서 (단순한 마크 업 인 flexbox 사용 단면 DIV

.section { 
    min-height: 200px; 
    width: 50%; 
}

http://jsfiddle.net/awkoL2sw/

출처

2014-11-27 11:37:02 Jaishankar

각 div의 콘텐츠 각 섹션마다 높이가 달라질 필요가 있습니다. 래퍼 텍스트 사용을위한 – Beezer900

display : flex; – Jaishankar

으로 최소 높이 또는 높이를 설정 한 클래스는 꼭 필요하지는 않습니다.) 이렇게해볼 수 있습니다 : http://codepen.io/anon/pen/YPXJNM

코드

HTML

<div class="wrapper"> 
    <div>1 Lorem ipsum dolor sit amet, ... dolor</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    </div>

CSS

.wrapper div:nth-child(2n)  { background: #DCC6E0; } 
.wrapper div:nth-child(2n - 1) { background: #E26A6A; } 

.wrapper { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; } 

.wrapper div { width: 50%; }

스크린 샷

브라우저 및 자습서에서 enter image description here

인 flexbox 지원는 :

http://caniuse.com/#feat=flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

출처

2014-11-27 11:53:27 fcalderan

CSS - 플로팅 섹션 좌우측, 반응 형 디자인

답변

관련 문제