如何将HTML组件与CSS对齐？
[英]How can I align my HTML components with CSS?
问题描述
我正在为巴西制作地图+函数，我想将显示“ Anuncie aquiégrátis”的图像和右侧的欢迎文本对齐，以使图像和欢迎文本与下面的“信息”文本对齐。 我该怎么办？ 我也许可以用表实现它，但是我认为CSS可以更好。 我有一个起点，如果我可以将设计的东北部对齐，那么我将更接近完成。
<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">
©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;
}
2 个解决方案
解决方案1
2 2011-10-11 01:00:46
#navbar不在右侧，因为它下面的Google广告将其推回。 您可以在导航栏内进行操作，可以将它们包装在另一个div中：
<div id="navbar">
<div class="navwrapper">
<a href="ai"><img src="/_/img/anuncio.gif" /></a>
<ul>
[...]
</ul>
</div>
</div>
并且对于您的CSS有：
#navbar .navwrapper {
float: right;
}
解决方案2
1 已采纳 2011-10-11 01:14:49
我不确定我是否完全了解您，如果您将图像编辑成您想要的样子可能会更容易。
这使欢迎文本和消息位于右侧站点上，但最多不超过940px。 由于设置了容器宽度的原因。
#navbar{
text-align:right;
}
我有一个奇怪的HTML和CSS结构，如何使聊天消息与底部对齐？
[英]I have a weird html and css structure, how can I make my chat messages align to the bottom?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.