css float : 왼쪽으로 왼쪽으로 이동

왜이 기능이 작동하지 않습니까? float를 사용하여 여러 div를 할당했습니다. 첫 번째 요소의 위치를 설정하고 모든 형제 위치를 업데이트해야합니다.css float : 왼쪽으로 왼쪽으로 이동

예를 들어 첫 번째 요소의 CSS 왼쪽을 50px로 설정합니다. 나는 형제가 모두 교대 할 것이라고 기대했지만 부모는 부모와 관련된 위치에 머물렀다.

<style type="text/css"> 
    .wrap {margin:10px; width:auto; height:70px; background:#ccc; position:relative;} 
    .floater {width:50px; height:50px; float:left; background:blue; margin:10px 0px 0px 10px; position:relative; left:10px;} 
</style> 

<div class="wrap"> 
    <div class="floater" style="left:50px; background:red"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div>        
</div>

나는 눈치 내가 마진 왼쪽 내가 원하는 동작을 얻을하지만 수시로 된 div의 현재 위치를 조회해야하기 때문에 나는 여백에서 왼쪽으로 사용하지 않으려는 다음 사용하는 경우 그.

내가 원하는 것을 얻는 방법에 대한 의견이 있으십니까? 감사.

야곱

출처

2011-07-02 ctown4life

http://jsfiddle.net/userdude/ZurxT/ –

이 예상되는 행동 : http://www.w3.org/TR/CSS2/visuren.html#relative 위치 지정. 다른 요소는 상대적으로 배치 된 요소 원래 위치의 흐름을 따릅니다. 아마도 당신이 무엇을하려고하는지 더 자세히 설명하면 (예 : 여백 왼쪽이 왜 효과가없고 왜 '현재 위치'를 쿼리해야하는지 '라는 의미), 더 나은 도움을 제공 할 수 있습니다. – Brent

이것은 left의 올바른 렌더링입니다. left 속성은 position과 함께 사용하기 위해 주위의 다른 요소에 영향을주지 않고 지정된 요소의 위치를 조정합니다.

일반적으로 left, right, top 및 bottom을 사용하면 요소 그룹에 고정 레이아웃을 만들 수 있습니다. 각각은 position:relative; (또는 absolute 또는 fixed)이 될 것이고 을 부모 요소에 상대적으로 배치하는 고유 한 위치 지정을 가지며 서로에 대해 상대적이 아닙니다.

이것은 분명히 요소가 서로 상대적으로 매우 많이 위치하는 float의 개념과는 확연한 차이가 있습니다.

1)이 부유 요소에 left:50px; 대신 컨테이너 wrap div 요소에 padding-left:50px;를 넣어 당신이 그것을 가지고 :

두 솔루션은 당신이 원하는 것을 할 것이다 떠오른다.

2) float:left; 대신 display:inline-block;을 사용하십시오. 이렇게하면 플로트보다 레이아웃 작업이 쉬워집니다. float가 때로는 작업하기에 꽤 고통 스럽기 때문에 특히 레이아웃을 세부적으로 조정하고 싶을 때 inline-block 솔루션을 선호합니다.

내 JSFiddle 예 참조 : http://jsfiddle.net/xgKBc/

출처

2011-07-02 11:47:58 Spudley

아아, 디스플레이 : 인라인 블록은 내가 필요한 방식으로 정확하게 작동합니다. 도와 줘서 고마워! – ctown4life

당신은 모든 플로터를 왼쪽에 50 픽셀의 상대 위치를 제공 할 수 있습니다. 또는 래퍼에 50px 왼쪽의 패딩을 추가 할 수 있습니다.

두 예의 경우 demo fiddle을 참조하십시오.

출처

2011-07-02 10:47:41 NGLN

css float : 왼쪽으로 왼쪽으로 이동

답변

관련 문제