CSS와 함께 정렬하는 문제

Question

내 문제는 아주 간단하지만 어떻게해야하는지 알 수 없습니다. div가 있고 그 안에 몇 가지 정보가 표시됩니다. 기본적으로 다음과 같은 내용이 표시됩니다.

title1:   20 
title2:   30 

제목을 왼쪽으로 정렬하고 오른쪽으로 번호를 정렬하고 싶습니다. 다음은 내가 수행 한 작업입니다. http://jsfiddle.net/MmLQL/34/. 보시다시피, 나는 번호와 제목 사이에 줄 바꿈을 가지고 있습니다. 하지만 요소를 인라인으로 표시하고 줄 바꿈을 강제하지 않는 span 태그를 사용하더라도 텍스트 맞춤 오른쪽/왼쪽 옵션이 손실됩니다. 다음은 예입니다. http://jsfiddle.net/MmLQL/35/

Answer 1

당신과이 방법을 시도해야한다 "플로트 :"나는 다음과 같은 일을해야 생각

.container { 
    width: 100%; 
    clear: both; 
} 
.title { 
    float:left ; 
    display: inline; 
} 

.number { 
    float: right; 
} 

<div > 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
    <div class="container"> 
     <div class="title">title:</div> 
     <div class="number">number </div> 
    </div> 
</div> 

Answer 2

나는 이걸 float param이라고합니다. 이처럼 : http://jsfiddle.net/dan1410/MmLQL/38/

Answer 3

이, http://jsfiddle.net/MmLQL/36/,

HTML

<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 
<div > 
    <h3>number </h3> 
    <h2 >title: </h2> 
</div> 

CSS

h2 {text-align:left} 

h3 { 
    text-align: right; 
    float:right; 
} 

을 시도 당신은 비록 div의에 플로트 클리어 사용해야 할 수도 있습니다

, 도움이 될 것입니다. http://www.positioniseverything.net/easyclearing.html,

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.. div를 class = "clearfix"로 수정하십시오.

Answer 4

을, 헤더의 레이아웃을 조정하는 인라인 블록을 사용, 왼쪽 정렬 하나에 다음 플로트 그것이 올바른 방향으로 자리 잡도록 보장합니다. 또한 CSS 테이블/테이블 세포를 사용할 수 있습니다

div { width: 100%; } 
h2 { 
    width: 50%; 
    display: inline-block; 
    float: left; 
} 

h3 { 
    display: inline-block; 
    width: 50%; 
    text-align: right; 
} 

Answer 5

<div class="container"> 
    <h2>title: The Title</h2> 
    <h3>number</h3> 
</div> 

CSS :

.container { 
    border: 1px solid gray; 
    display: table; 
    width: 400px; /* set to 100% if full width */ 
} 
h2 { 
    text-align:left; 
    display: table-cell; 
} 
h3 { 
    text-align: right; 
    display: table-cell; 
} 

참조 데모 http://jsfiddle.net/audetwebdesign/pcZaq/

일부 통제권해야하는 경우이 방법은 유용 수직 정렬.

또한 표 셀은 작은 화면 크기로 두 번째 줄로 줄 수있는 부동 소수점 또는 인라인 블록과 달리 항상 한 줄로 유지됩니다.

레이아웃 선택 방법은 부분적으로 레이아웃을 응답 방식으로 작동시키는 방법에 따라 다릅니다.

Answer 6

다른 해답이 제공하는 모든 해킹 솔루션 대신 표 형식의 데이터를 정렬하려는 것처럼 보입니다. 어떤 경우에는 테이블을 사용해야합니다.

표시 : 실제로 표 셀은 실제 요소를 제공하기 위해 CSS에만 있고 그 자식은 스타일을 제공합니다. 테이블이 아닌 요소가 테이블 요소처럼 동작하도록 사용해서는 안됩니다. 적어도, imho.

플로트 : 요소의 레이아웃을 정렬하는 경우에만 왼쪽으로 이동하는 것이 좋습니다.

데이터가 실제로 표 형식의 데이터 인 경우 표를 사용하십시오. 그것은 당신의 문제를 해결하고 동시에 더 의미 론적입니다.