플로팅 div가 페이지 상단에 없음

3 개의 왼쪽 플로팅 div (1, 2 & 3)와 하나의 플로팅 라이트 (4)가 있으며 이는 HTML 코드의 마지막 div이기도합니다. 왼쪽에있는 세 개는 너비의 60 %를 차지하고 마지막 div는 오른쪽에 채워야합니다. 그러나 div 4는 div 3을 지나칠 때만 멈추고 멈 춥니 다.플로팅 div가 페이지 상단에 없음

<body> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 1 
    </div> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 2 
    </div> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 3 
    </div> 
    <div style="width: 40%; float: right; background-color: yellow;"> 
     div 4 
    </div> 
</body>

페이지 상단으로 이동하는 방법에 대한 제안 사항이 있으십니까?

출처

2013-07-07 user2220785

일부 코드가 좋은 – Muath

둘째 @MoathHowari 될 것입니다 데모입니다 : 우리를 도와 (HTTP [재생]을 : // sscce.org) 문제 (참고 : 질문을 편집하여 코드를 추가 할 수 있습니다). – Jeroen

야생 추측 : [표준 상자 크기 조정] (http://jsfiddle.net/m4duE/)과 [테두리 상자 크기 조정] (http://jsfiddle.net/fyyMV/)의 차이가 있습니까? – Jeroen

원하는 사항은 무엇입니까?

<section class="container"> 
    <div class="block one"></div> 
    <div class="block two"></div> 
    <div class="block three"></div> 
    <div class="block four"></div> 
</section>

그냥이 CSS 규칙을 추가 :

*, *:before, *:after { 
    box-sizing: border-box; 
} 

body, div, section { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    background: #CCC; 
    height: 100%; 
} 
.block { 
    height: 100px; 
    display: inline-block; 
    border: 1px solid black; 
} 
.block:not(.four) { 
    float: left; 
    width: calc(60%/3); 
} 
.four { 
    width: calc(100% - 60%); 
} 
.container > .four { 
    float: right; 
}

내가 요소로 설정 앵커의 calc() 기능을 사용

DEMO 나는 약간의 HTML 코드를 편집했다. 브라우저 지원을 볼 수 있습니다 here

EDIT 죄송합니다, 귀하의 질문을 이해하지 못했습니다. 이것은 당신이 원하는 것입니다! DEMO =)

건배, 레오!

출처

2013-07-07 20:29:54 leoMestizo

내가 원하는 것은 다음과 같습니다. http://jsfiddle.net/SM68h/ 노란색 div는 div 3 옆에 있지 않고 페이지 상단 (div 1 옆)에 있어야합니다. – user2220785

그러나 그 바이올린에서 네 블록 꼭대기에 있지 않다. 내가 잘 읽으면 네 요소를 맨 위에 올려 놓고 싶습니다. (필자 (http://jsfiddle.net/Y9Yck/2/))와는 다릅니다. – leoMestizo

예. div 1, 2 및 3은 서로 옆에 있지 않고 서로 아래에 있어야합니다. Div 1, 2 & 3이 내 페이지의 주요 내용이되며 div 4는 사이드 바가됩니다. – user2220785

내가 여기에서 달성하려고하는 것은 content 페이지 (왼쪽 플로팅 divs)와 sidebar (오른쪽 div)에 넣는 것입니다.
글쎄, 여기에는 여러 가지 방법이 있는데, 여기에는 without using floats (오른쪽 또는 왼쪽) 방법이 있습니다.

HTML :

<body> 
    <section style="width: 60%;"> <!-- Your main content goes in here --> 
     <div style="background-color: red;">div 1</div> 
     <div style="background-color: red;">div 2</div> 
     <div style="background-color: red;">div 3</div> 
    </section> 
    <aside style="width: 40%;" class="right"> <!-- content for right sidebar --> 
     <div style="background-color: yellow;">div 4</div> 
    </aside> 
</body>

CSS : 여기

aside,section { 
    display : inline-block; 
    padding : 0; 
    margin : 0; 
} 

aside.right { 
    vertical-align: top; //to bring sidebar to top 
}

이 FIDDLE

출처

2013-07-07 20:54:26 face

'* {상자 크기 : 테두리 상자; }'를 여러분의 예제에 적용하면 두 번째'비공개 '를 40 % ('width' 속성에) 넣을 수 있습니다. – leoMestizo

@LeonardoManrique가 작동하지 않았거나, 여기에 업데이트 된 바이올린이 있습니다 - http://jsfiddle.net/kQ6S6/1/ 내 머리를 긁적 혔는데 jsfiddle에서 초보자를 얻는 방법 : - / – face

플로팅 div가 페이지 상단에 없음

답변

관련 문제