Blok öğeleri olan bir div içinde css kullanarak sağdaki metni nasıl hizalarım

ben CSS kullanarak, sayfamda bir başlık div içinde aşağıdaki düzenini üretmek isteyen sadeceBlok öğeleri olan bir div içinde css kullanarak sağdaki metni nasıl hizalarım

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

ben sağda metin hizalama konusunda sorun yaşıyorum. Böyle hemen sağa ve başlık metninin altında bir satır hizalayarak tutar

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

Bu benim şimdiki işaretleme yöntemidir.

<!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>

Satır içi stilinin h1 elemanından sonra satır sonu oluşturmamasını bekledim ama bu durum böyle değil. Yanlış yaptığım şeyi öneren var mı?

kaynak

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; }

Öğelerin etrafında fazladan boşluklara veya yüzer durumda bir temizleme bölmesine ihtiyaç yoktur. Yapmaya çalıştığınız şeyi yapmak için yukarıdaki tekniği düzenli olarak kullanıyorum. taşma: hidden; başlığın yüzdelerini temizlemesini sağlar, ancak belirtilen genişlik yoksa yakınlaştırmaya ihtiyacınız olacaktır: 1; IE6 için. zoom doğrulanmıyor, ancak kusursuz çalışıyor ve gerekiyorsa bir ie6 sadece css dosyasına ekleyebilirsiniz.

kaynak

2009-03-28 13:59:30

Teşekkürler Justin, bu mükemmel çalışıyor. Sağdan mutlak konumlandırmayı kullanarak başka bir çözüme ulaştım ama benim için işler. –

Bu güzel ve zarif bir çözüm Justin ... ve Steve'in daha az markalama isteğini yerine getiriyor. Bunu sevdim!!! –

Harika. Bilemedim: taşma: gizli ”bir elementi içerdiği yüzerlere genişletirdi. 'Float: sol' gerçekten 'img' ve 'h1' üzerinde gerekli mi? Öyle değil gibi görünüyor. –

"Float: right;"

kaynak

2009-03-28 12:28:04 Albert

Bunu denemiş ama sonra div dışında ve ondan sonra kılar - şu şekildedir:

(Bryan'dan çok kopya ile) Ben ulaştık nihai çözümdür. –

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

kaynak

2009-03-28 12:34:42

Büyük olasılıkla

<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>

"Temizle" bir yerde senin yüzen temizlemek amacıyla gerekli olacaktır, ancak başka bir div uygulanan olabilir ... Böyle bir şey yapmak zorunda kalacaktır başlığa dahil olmak yerine başlığınızı takip eden etiket.

Not ... Görüntünün sağındaki metin alanlarının dikey olarak "orta" hizalanması için biraz değiştirdim. Dizaynı css tabanlı olarak değiştirebilirsiniz, ancak bu sizin aradığınızı merak etmelidir.

kaynak

2009-03-28 12:37:23

+1 Thankyou. Bu kesinlikle işe yarayacak. Bundan kaçınabiliyorsam fazladan işaretlemekten kaçınmaya çalışıyorum. –

Teşekkürler Steve, öneriye yardımcı olmaktan memnun oldum ... projenizle iyi şanslar !!! –

Yakınlaştırılmış ve boyutsuz float kullanan css ile hem doğrulama hem de başarısız oldu. Ayrıca, giriş durumu dikey olarak ortalanmış olarak gösterilmedim.

<!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>

kaynak

2009-03-28 19:14:47

Blok öğeleri olan bir div içinde css kullanarak sağdaki metni nasıl hizalarım

cevap

İlgili konular