如何將我的HTML組件與CSS對齊？

我正在爲巴西製作一張地圖+功能，並且我想將「Anuncie aquiégrátis」圖片與歡迎文字對齊，以便圖片和歡迎文字與文字「信息「下面。我應該怎麼做？我可以用表格實現它，但我認爲CSS可以更好。我有一個開始，如果我只能對齊my design的東北部分，那麼我會更接近完成。如何將我的HTML組件與CSS對齊？

enter image description here

<body onload="initialize()"> 
<div class="container_12"> 
    <div id="mainCol" class="grid_12"> 
     <div id="header"> 


      <div id="navbar"> 
      </div> 



      <div id="logo-wrap"> 

<table><tr><td> 
       <div id="logo-img"><a class="nobk" href="/ai"><img src="/_/img/montao.gif" alt="Market Logo"/></a><ul> 

    <li><a href="li">{% now "d M" %}</a></li>     
<li>{% if user %}<a href="{{ user_url|fix_ampersands }}">{% trans "Log out" %}</a> 
{% else %}<li><a href="/login">{% trans "Log in" %}{% endif %}</a></li> 
</ul> 
</td><td> 
<a href="ai"><img src="/_/img/anuncio.gif" alt=""/></a> 
    <div id="user-ident"> 
       <span>{% trans "Welcome," %} <b>{{user.nickname}}</b></span> 
      </div>    

</td></tr></table> 



</div> 
       <div id="logo-text"><h1 style="display:none">Market</h1> 


</div> 



      </div> 



     </div> 



    </div> 



</div> 


<div class="clear"></div> 
    <div id="map_canvas" style="height: 400px; position: relative; background-color: rgb(229, 227, 223);"> 
</div> 

<div class="container_12"> 
    <div class="grid_6"> 
     <div class="title1">{% trans "Post a photo" %}</div> 
     <div class="countries_list">  

      <form method="post" action="{{form_url}}" enctype="multipart/form-data"> <div> 
      <input type="file" name="file" /><input type="submit" value="{% trans "Go" %}" /></div> </form>  


     </div> 
    </div> 
    <div class="grid_6"> 
     <div class="title1">Information</div><div> 
          <a href="sao_paulo">São Paulo</a>       
         <br> <a href="rio_de_janeiro">Rio de Janeiro</a> 
         <br> <a href="espirito_santo">Espírito Santo</a> 
         <br> <a href="minas_gerais">Minas Gerais</a> 
         <br> <a href="parana">Paraná</a> 
         <br><a href="santa_catarina">Santa Catarina</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Rio Grande do Sul</a>       
         <br><a href="bahia">Bahia</a> 
         <br> <a href="pernambuco">Pernambuco</a>       
         <br> <a href="li?lat=-23.33&lon=-46.38">Ceará</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Rio Grande do Norte</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Amazonas</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Distrito Federal</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Pará</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Maranhão</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Goiás</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Paraíba</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Alagoas</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Piauí</a>      
         <br> <a href="li?lat=-23.33&lon=-46.38">Mato Grosso</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Mato Grosso do Sul</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Sergipe</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Rondônia</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Tocantins</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Acre</a> 
         <br><a href="li?lat=-23.33&lon=-46.38">Amapá</a> 
         <br> <a href="li?lat=-23.33&lon=-46.38">Roraima</a></div> 
     <div class="link_to_profile"> </div> 



    </div> 
</div> 


<div class="clear"></div> 


<div class="container_12"> 
    <div class="grid_12"> 
     <div id="footer"> 
     &copy;2011 <a href="http://montao.com.br" title="Montao">Montao.com.br</a> 

     </div> 

    </div> 
</div> 
</body> 


/* @override http://localhost:8000/static/css/style.css */ 

    @import url("960.css"); 
    @import url("reset.css"); 
    @import url("text.css"); 
    @import url("uni-form-generic.css"); 
    @import url("uni-form.css"); 


    h1, h2, h3, h4, h5, h6, h7, h8 { 
     text-shadow: #fff 1px 1px 1px; 
    } 

    a {} 
    a:link {color: #750006;} 
    a:visited {color:#0D1826;} 
    a:hover {color: #d2e0f7; background-color:#2C4F66; text-decoration:none} 

    .nobk:hover { 
     background:none; 
    } 

    body { 
     font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; 
     font-size: 12px; 
     margin: 0px; 
     color:#2C4F66; 
     background-color:#ffffef; 
     line-height:1.3; 
    } 

    #main_content { 
     background: yellow; 
    } 

    #footer { 
     background-color:#99b3cc; 
     color:#2C4F66; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     margin-top: 15px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     //text-shadow: #fff 1px 1px 1px; 
    } 

    #mainCol ul { 
     list-style:none; 
     margin:10px 0 10px 0; 
     padding:0; 
    } 

    #mainCol li { 
     display:inline; 
     margin:0 0 0 1px; 
     padding:0; 
    } 

    #mainCol li a:link, #mainCol li a:visited { 
     text-decoration:none; 
     font-size:1.3em; 
     font-weight:bold; 
     color: #fe0403; 
     background-color:#fff7aa; 
     padding-left: 6px; 
     padding-right: 6px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     text-shadow: #000 1px 1px 1px; 
    } 

    #mainCol li a:hover { 
     color:#fe0403; 
     background-color:#e2f3b8; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     padding-left: 6px; 
     padding-right: 6px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     text-shadow: #000 1px 1px 1px; 
    } 

    .mapContainer #gmap { 
     height: 400px; 
     border-top: 2px solid #8D9BA1; 
     border-bottom: 2px solid #8D9BA1; 
    } 

    .mapContainer2 #gmap { 
     height: 300px; 
     overflow:hidden; 

    } 

    .title1 { 
     font-size: 20px; 
     margin-top: 20px; 
     margin-bottom: 20px; 
     background-color:#99b3cc; 
     color:#2C4F66; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     text-shadow: #fff 1px 1px 1px; 
    } 

    /* ========== A view =========== */ 

    #contact_info { 
     background-color:#d2e0f7; 
     color:#2C4F66; 
     padding: 10px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
    } 

    #contact_info h6{ 
     font-size: 12px; 
    } 

    .tag { 
     font-weight:bold; 
     color: #d2e0f7; 
     background-color:#8D9BA1; 
     padding-left: 6px; 
     padding-right: 6px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     text-shadow: #666 1px 1px 1px; 
    } 

    a:hover .tag { 
     background-color: #2C4F66; 
     text-decoration: none; 
    } 

    a:visited .tag { 
     color: #FFF 
    } 
    /* ========== DEV Info ============*/ 

    .dev_avatar { 
     float:left; 
    } 

    #dev-info { 
     padding-left:220px; 
    } 

    .dev_name { 
     font-size: 36px; 
     font-weight: bold; 
     text-shadow: #fff 1px 1px 1px; 
    } 

    .dev_location { 
     font-size: 18px; 
    } 

    .dev-result{ 
     font-size:18px; 
     width: 32%; 
     float: left; 
    } 

    .countries_list dt { 
     font-size: 14px; 
     font-weight: bold; 
    } 

    .countries_list dd a{ 
     font-size: 12px; 
     text-decoration: none; 
    } 

    .link_to_profile { 
     font-size: 14px; 
     height: 25px; 
     width: 49%; 
     float: left; 
    } 

    /* Debug class */ 
    .show { 
     background-color:pink; 
    } 

    /* Mugur CSS Starts Here */ 

    .ybox{ 
     background-color:#d2e0f7; 
     color:#2C4F66; 
     padding: 10px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
    } 

    #header { 
     margin-bottom:20px; 
     position:relative; 
    } 

    #logo-wrap{ 
     position:relative; 
     width:480px; 
    } 

    #logo-text{ 
     position:absolute; 
     top:70px; 
     left:150px; 
    } 

    #logo-text h1{ 
     font-size:24px; 
     font-weight:bold; 
     color:#2C4F66; 
     text-shadow: #cccccc 1px 1px 1px; 
    } 

    #user-ident { 
     float:right; 
     clear:both; 
     position:relative; 
     text-align:right; 
     background-color:#d2e0f7; 
     color:#2C4F66; 
     padding-left: 6px; 
     padding-right: 6px; 
     padding-top: 2px; 
     padding-bottom: 2px; 
     -moz-border-radius: 4px; 
     -webkit-border-radius: 4px; 
     -ms-border-radius: 4px; 
     text-shadow: #fff 1px 1px 1px; 
    } 

    #navbar{ 
     float:right; 
     clear:both; 
    } 

    #tags { 
     line-height:2; 
    } 

    #dev_bio { 
     font-size:18px; 
    } 

    /* Forms */ 

    .uniForm fieldset { 
     border:1px solid #DFDFDF; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     -ms-border-radius: 5px; 
     padding: 5px; 
    } 

    .uniForm fieldset legend { 
     font-size: 1.5em; 
    } 

    /*** Stats */ 
    #countries_map { 
     margin-left: auto; 
     margin-right: auto; 
    }

來源

2011-10-11 Niklas Rosencrantz

我不知道如果我完全理解你，可能是如果您將圖像編輯爲您想要的圖像，看起來更加簡單。

這使歡迎文本和消息坐在右手邊的網站，但只能達到940px。由於某些設置容器的寬度。

#navbar{ 
    text-align:right; 
}

來源

2011-10-11 01:14:49 Bankzilla

的#navbar不對準正確的，因爲其下的谷歌廣告推了回去。你可以做的是導航欄裏面，你可以用這些內部另一格：

<div id="navbar"> 
    <div class="navwrapper"> 
    <a href="ai"><img src="/_/img/anuncio.gif" /></a> 
    <ul> 
    [...] 
    </ul> 
    </div> 
</div>

併爲你的CSS有：

#navbar .navwrapper { 
    float: right; 
}

來源

2011-10-11 01:00:46 voldomazta

如何將我的HTML組件與CSS對齊？

回答

相關問題