왜이 div는 다음 div가 오른쪽으로 이동하도록 강제하지 않습니까?

jsFiddle 왜이 div는 다음 div가 오른쪽으로 이동하도록 강제하지 않습니까?

div를 공백 div로 사용하려고하면 div가 오른쪽으로 더 이동합니다.

스타일 당신이 jsFiddle에서 볼 수 있듯이,이 작동하지 않습니다

<div id="buffer_div"></div> 
<div id="note-1" class="note"> 
    note display here1 
</div> 
<div id="note-2" class="note"> 
    note display here2 
</div> 
<div id="note-3" class="note"> 
    note display here3 
</div>

div.note {float:left;width:60px; padding:0 0 0 50px;} 
#buffer_div {width:150px;}

HTML. 내가 도대체 뭘 잘못하고있는 겁니까?

출처

2011-02-24 ben

대신 다음과 같이하십시오. 목표를 달성 할 수있는 마크 업을 가능한 적게 가지고 있다면 도움이됩니다. 원하는 것은 모두 여백을 더하는 것뿐입니다. 마진은 잘됩니다.

<div id="note-1" class="note"> 
    note display here1 
</div> 
<div id="note-2" class="note"> 
    note display here2 
</div> 
<div id="note-3" class="note"> 
    note display here3 
</div>

그리고 당신의 CSS에서

div.note { 
    float:left; 
    width:60px; 
    padding:0 0 0 50px; 
} 

div#note-1{ 
    margin-left:150px; 
}

당신은 실제로 아마 사이드 바 같은 일부 콘텐츠, 당신은 너무 그것에 float를 추가해야합니다 가지고 "#buffer_div"를 사용하고 싶어합니다. 한 그룹의 요소를 연속적으로 표시하려면 모든 요소에 부동 소수점을 추가하는 데 아무런 문제가 없습니다.

출처

2011-02-24 11:13:24 Sam152

그게 내가 현재하고있는 일이지만, 페이지에서 일부 아약스 물건을하고 첫 번째 메모가 동적으로 변경되기 때문에 다른 방법을 찾고 싶습니다. – ben

이것은 가장 좋은 방법입니다. – cjk

float-jsfiddle.net/PsQBD/12를 추가하려고했으나 아직 제대로 작동하지 않기 때문에 제대로하고 있다고 생각하지 않습니다. – ben

버퍼 div도 플로팅해야합니다. 플로트 및 비 플로트 요소는 서로 간섭하지 않습니다.

출처

2011-02-24 11:11:53 cjk

나는 이것을 해 보았습니다 - http://jsfiddle.net/PsQBD/12/ -하지만 여전히 작동하지 않습니까? – ben

@ben, div에는 내용이 없으므로 렌더링되지 않습니다. – Sam152

div에는 비 단선 문자 (' ') 나 높이가 필요한 필러 콘텐츠가 필요합니다 (예 :'height : 1px') – Daan

div가 비어 있으므로 공간이 필요 없습니다. 다음은 왼쪽 공간을 갖고 싶어 그냥 사업부를 제거하고 (버퍼 DIV를위한 아주 좋은 이유가없는 한) 버퍼 사업부의 모든 노트의 아이를 만들 것

.note:first-child {margin-left: 150px}

출처

2011-02-24 11:15:27 Andrea

쉬운 방법을하고 "width"를 "margin-left"로 변경하십시오.

출처

2011-02-24 11:17:56 Trezoid

왜이 div는 다음 div가 오른쪽으로 이동하도록 강제하지 않습니까?

답변

관련 문제