CSS 동일 라인 정렬

같은 줄에 3 개의 요소를 왼쪽, 가운데 및 오른쪽으로 정렬하는 우아한 방법이 있습니까?CSS 동일 라인 정렬

지금은 폭이 3325 % 인 3 <div>의 것을 사용하고 있습니다 : float : left; 너무 잘 작동하지 않습니다.

2009-02-08 Anonymous

전체 코드 샘플을 첨부 할 수 있습니까? – bendewey

코드 샘플이 도움이됩니다. –

첫 번째 두 개를 왼쪽으로 플로팅하고 세 번째를 오른쪽으로 띄우십시오. 너비가 배치 할 선에 맞는 지 확인하십시오.

디자인에서 허용하는 경우 픽셀 너비를 사용하십시오.

<html> 
    <head> 
    <style> 
     div.fl { 
     float: left; 
     width: 33%; 
     } 
     div.fr { 
     float: right; 
     width: 33%; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="fl"> 
     A 
    </div> 
    <div class="fl"> 
     B 
    </div> 
    <div class="fr"> 
     C 
    </div> 
    </body> 
</html>

이 같은 뜻 : 나를 위해 작동

출처

2009-02-08 16:17:06

출처

2009-02-08 16:17:49

Float LeftBlock 'left', CenterBlock 'none'및 RightBlock 'right'. 그러나 센터 요소가 HTML 페이지에 마지막으로 표시되는지 확인하십시오. 그렇지 않으면 작동하지 않습니다.

출처

2009-02-08 16:19:49 flesh

추가 할 요소에 여백이 있으면 이상한 결과가 발생할 수 있습니다. 여기에 요소가있는 여백의 크기를 고려해야하기 때문에 width: 33%이 작동하지 않을 수 있습니다.

<html> 
<head> 
<title></title> 
<style type="text/css"> 
div { float: left; width: 33%; margin: 4px; } 
</style> 
</head> 
<body> 

<div style="border: 1px solid #ff0000;">1</div> 
<div style="border: 1px solid #00ff00;">2</div> 
<div style="border: 1px solid #0000ff;">3</div> 

</body> 
</html>

이렇게하면 각 div에 여백이 추가되어 예상대로 작동하지 않게됩니다. 마찬가지로 각 div에 테두리를 너무 많이 추가하면 비슷한 결과가 나타납니다. border: 5px solid !important;

위 코드에서 여백을 제거하면 예상대로 작동합니다.

출처

2009-02-08 16:23:04

이 시도 :

<div style="float: left; width: 100px;"> 
    left 
</div> 
<div style="float: right; width: 100px;"> 
    right 
</div> 
<div style="width: 100px; margin: 0 auto;"> 
    center 
</div>

하는 당신은 그들보다 더 많은 콘텐츠를 경우에도 왼쪽과 오른쪽 div의 컨테이너 상자 (위의 코드 주위 사업부) 높이 아래로 밀어하지 않는 것이 고려해야 할 센터 div, 유일한 부동 한. clearfix가이를 처리합니다. 여기

출처

2009-02-08 16:38:26 idevelop

아직 테마의 다른 varition 인 - 테두리가 '패널'div가 각각 내측 DIV를 이용하여 가능하다

<html> 
<head> 
<style type="text/css"> 
    div div {border:1px solid black} 
    div.Center {width:34%; float:left; text-align:center} 
    div.Left {float:left; width:33%; text-align:left} 
    div.Right {float:right; width:33%; text-align:right} 
</style> 
</head> 
<body> 
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div> 
</body> 
</html>

참고. 또한 중앙에 픽셀의 1 %를 제공합니다.

출처

2009-02-08 16:41:28 AnthonyWJones

나는 비교를 위해 http://www.salestime.com/Ref/LeftCenterRight.html에서 세 가지 방법으로 페이지를 만들었습니다.

출처

2009-03-13 00:36:50

나를 위해 작동합니다. 그것이 가장 우아한 것인지 모르겠지만, 그것은 일을합니다 : 그것은 "셀"내용과 크기 조정에 잘 반응합니다.

<html> 
    <head> 
     <style> 
      .a { 
       border: 1px dotted grey; 
       padding: 2px; 
       margin: 2px; 
      } 
      .l { 
       border: 1px solid red; 
       background-color: #fee; 
       float:left; 
      } 
      .c { 
       border: 1px solid green; 
       background-color: #efe; 
       text-align:center; 
      } 
      .r { 
       border: 1px solid blue; 
       background-color: #eef; 
       float:right; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="a"> 
      <div class="l"> 
       &nbsp; 
      </div> 
      <div class="r"> 
       toto v.2 adfsdfasdfa sdfa dfas asdf 
      </div> 
      <div class="c"> 
       item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads 
      </div> 
     </div> 
    </body> 
</html>

출처

2011-12-28 02:33:17 sebnukem

CSS 동일 라인 정렬

답변

관련 문제