블록 요소가있는 div에있을 때 CSS를 사용하여 오른쪽에 텍스트를 정렬하는 방법

CSS 만 사용하여 내 페이지의 머리글 div에 다음 레이아웃을 생성하고 싶습니다.블록 요소가있는 div에있을 때 CSS를 사용하여 오른쪽에 텍스트를 정렬하는 방법

 
+-----------+ 
+   + 
+ Image + Title text       Some text aligned on the right 
+   + 
+-----------+

오른쪽 텍스트를 정렬하는 데 문제가 있습니다. 제목 텍스트 바로 아래의 오른쪽과 한 줄 바로 정렬됩니다.

 
+-----------+ 
+   + 
+ Image + Title text       
+   +   Some text aligned on the right 
+-----------+

이것은 현재 마크 업입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html> 
    <head> 
     <style type="text/css"> 
     #header, #footer { padding: 0.3em 0; border-bottom: 1px solid; } 
     #header img { display: inline;} 
     #header h1 { display: inline; margin: 0px; padding: 0px; 
         vertical-align: 50%; position: left;} 
     #login-status { margin: 0px; padding: 0px; 
         display: inline;text-align: right; position: right;} 
     </style> 

     <title>Models</title>    
     </head> 
     <body> 
     <div id="header"> 
      <img alt="Logo" height="110" width="276" 
      src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
      <h1>Models</h1> 
      <p id="login-status">You are currently logged in as steve</p> 
     </div> <!-- end of header --> 
     </body> 
    </html>

h1 요소 다음에 줄 바꿈이 발생하지 않도록 인라인 스타일을 예상 했었지만 그렇지 않습니다. 누구든지 내가 뭘 잘못하고 있다고 제안 할 수 있습니까?

출처

2009-03-28 Steve Weet

#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; } 
    #header img { float: left;} 
    #header h1 { float: left; margin: 0px; padding: 0px; } 
    #login-status { margin: 0px; padding: 0px; float: right; }

떠 다니는 경우 요소 주위에 여분의 div 또는 지우기 div가 필요하지 않습니다. 위의 기술을 정기적으로 사용하여 수행하려는 작업을 정확하게 수행합니다. 오버 플로우 : 숨김; 헤더가 플로트를 지우도록 지정하지만 너비가 지정되지 않으면 확대/축소가 필요합니다. 1; IE6 용. 확대/축소는 유효성을 검사하지 않지만 완벽하게 작동하며 필요한 경우 ie6 전용 CSS 파일에 추가 할 수 있습니다.

출처

2009-03-28 13:59:30

저스틴 감사합니다. 완벽하게 작동합니다. 나는 오른쪽에서 절대 posistioning을 사용하는 다른 솔루션에 도착했지만 나를 위해 일합니다. –

저스틴은 멋진 우아한 솔루션입니다 ... 그리고 스티브의 욕구를 덜 사용하게합니다. 나는 그것을 좋아한다! !! –

훌륭합니다. 'overflow : hidden '요소가 포함 된 수레로 요소를 확장한다는 것을 알지 못했습니다. 'img'와'h1'에서'float : left'가 정말로 필요합니까? 그렇지 않은 것 같습니다. –

"float : right;"를 사용하십시오.

출처

2009-03-28 12:28:04 Albert

나는 그것을 시도했지만 그 다음 사업부의 외부과 후 렌더링 - 다음과 같이

(브라이언과 크게 cribbing에) 내가 도착했습니다 마지막 솔루션입니다. –

img float: left; title text float: left; some text float: right;

출처

2009-03-28 12:34:42

당신이 가장 가능성이

<head> 
    <style type="text/css"> 
     #header, #footer 
     { 
      padding: 0.3em 0; 
      border-bottom: 1px solid; 
     } 
     #login-status 
     { 
      margin: 0px; 
      padding: 0px; 
      line-height: 110px; 
      vertical-align: middle; 
     } 
    </style> 
    <title>Models</title> 
</head> 
<body> 
    <div id="header"> 
     <div style="float: left"> 
      <img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px; 
       height: 110px" /> 
     </div> 
     <div style="float: left; margin: 0px 8px 0px 8px; 
      line-height: 110px; vertical-align: middle;"> 
      <h1>Models</h1> 
     </div> 
     <div id="login-status" style="float: right;"> 
      You are currently logged in as steve 
     </div> 
     <div style="clear: both"> 
     </div> 
    </div> 
    <!-- end of header --> 
</body>

은 "삭제"가 어딘가에 떠 취소하기 위해 필요합니다,하지만 다른 사업부에 적용 할 수있는 ... 이런 식으로 뭔가를해야 할 것 헤더에 포함되는 대신 헤더를 따르는 태그입니다.

참고 ...이 이미지를 이미지의 오른쪽에있는 텍스트 영역이 "중간"으로 정렬되게하려면 약간 변경했습니다. CSS 기반으로 스타일을 변경할 수 있지만 원하는 내용을 파악해야합니다.

출처

2009-03-28 12:37:23

+1 감사합니다. 그것은 확실히 작동 할 것입니다. 내가 그것을 피할 수 있다면 나는 여분의 마크 업을 피하려고 노력하고있다. –

감사합니다 스티브, 내 제안이 도움이 된 것을 기쁘게 ... 귀하의 프로젝트에 행운을 빌어 요 !!! –

확대/축소 크기가 아닌 수레를 사용하는 CSS가 유효성 검사에 실패 했으므로 조금 더 놀았습니다. 또한 로그인 상태가 세로로 가운데에 표시되는 것을 좋아하지 않았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <style type="text/css"> 
     #header, 
     #footer  { padding: 0.3em 0; border-bottom: 1px solid; 
         height: 110px; } 
     #header img { margin: 0px; padding: 0px; display: inline; } 
     #header h1 { line-height: 110px; vertical-align: middle; 
         display: inline; position: absolute; left: 300px; 
         margin: 0px; } 
     #login_status { font-size: 14px; margin: 0px; position: absolute; 
         top: 100px; right: 10px; display: inline; 
         text-align: right; } 
    </style> 
    <title>Models</title>  
    </head> 
    <body> 
    <div id="header"> 
     <img alt="Logo" height="110" 
     src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> 
     <h1>Models</h1> 
     <span id="login_status">You are currently logged in as stevew</span>  
    </div> <!-- end of header --> 
    </body> 
</html>

출처

2009-03-28 19:14:47

블록 요소가있는 div에있을 때 CSS를 사용하여 오른쪽에 텍스트를 정렬하는 방법

답변

관련 문제