2010-03-12 7 views
8

인라인 요소를 div 오른쪽으로 오른쪽 정렬하려고합니다. 나는 float = "right"를 오른쪽으로 맞춘다는 것을 보았지만, float은 컨테이너 요소의 오른쪽 또는 왼쪽으로 "boxes"또는 블록 요소를 이동해야하기 때문에 의미 상 올바르지 않은 것처럼 보입니다.div 오른쪽의 인라인 요소 플로팅

플로트에 대한 제 이해가 잘못되었거나 컨테이너 DIV에서 인라인 요소를 오른쪽 정렬하는 또 다른 방법이 있습니까?

+0

또 다른 문제는 Float에서 Float을 사용한다는 것입니다. Float의 요구 사항에 반하는 너비를 지정하지 않고 span에서 right를 사용한다는 것입니다. 기본적으로, 필자는 인라인 요소의 스트레칭 속성을 활용하려고합니다. 이는 내 경우에는 동적 인 내용의 너비를 사용하기 때문입니다. DIV로 변환하면 이점이 없어집니다. – Rajat

답변

5

요소를 플로팅하면 자동으로 상자 안에 들어갑니다. (참조 : http://css.maxdesign.com.au/floatutorial/introduction.htm) 그러나 의미 론적으로 잘못된 것은 없습니다. 의미 체계는 블록으로 표시되어야 할 내용과 인라인으로 표시되어야하는 것을 지정하지 않습니다. 이것이 우리가 임의로 선언 할 수있는 한 가지 이유입니다. (확실하게 지저분한이되면 순서가 어긋나 기 시작합니다.하지만 내가 원하는 것을 상상할 수는 없으므로 여기에 대해 말씀 드리고자합니다. ) 보통의 텍스트의 흐름 (플로트가하는 것)과 독립적으로 인라인 텍스트를 정렬해야한다면, 어쨌든 그것을 블록으로 표시하고 싶을 것입니다. 실제로 인라인 요소 인 경우 text-align:right 만 있으면됩니다. 플로트 또는 선언 된 위치가 필요하다면 이미 블록 요소로 처리하고 있으므로 선언 할 때 오류가 없습니다.

+0

하지만 너비를 사용하지 않는 플로트를 사용하는 것은 좋지 않으며이 경우 너비가 콘텐츠가되고 따라서 인라인 요소가되기를 원하십니까? 그래서, 만약 내 요소가 Float을 가진 블록 요소라면, 지정된 넓이가 아프지 않겠는가? – Rajat

+1

@Rajat 너비를 지정하지 않으면 기본적으로 플로트가 가장 긴 단어의 크기로 축소됩니다. white-space : nowrap을 사용하면 해당 동작을 무시할 수 있습니다. 그러면 콘텐츠만큼 넓어집니다. (랩을해야하는 경우 BR에 넣어야합니다.) –

6

float: right은 블록 레벨이나 인라인에 상관없이 완전히 의미가 있습니다. 의미 상 또는 스펙에 따라 중요하지 않습니다 (필자가 알고있는 한). 당신이 float를 사용하지 않고 마우스 오른쪽 정렬 뭔가하려는 경우

다음 margin-right: 90%;의 가능성이있다 (당신이 무엇을 다른 10 %에 맞는에 /에서 오른쪽으로 정렬 된 것을 알고 가정합니다.

또는 direction: rtl;하지만 결코 나는 그것이해야한다고 생각하는 것처럼 작동하며 플러스 일을 복잡하게 만듭니다.

position: absolute; right: 0; 필요에 따라 (하지만 문서의 흐름에서 제거 될 것입니다. position: relative; (또는 적어도 position으로 정의 됨)이 정의되어 있습니다.

당신은 아마도 text-align: right을 사용할 수 있지만 그렇게 간단한 솔루션처럼 보이기 때문에 이미 시도했을 것입니다.

유스 케이스, 일부 코드 및 예상 최종 결과를 제공 할 수 있다면 더 많은 도움을 드릴 수 있습니다.