html - 底部对齐有问题

标签 html css vertical-alignment

我试图让我的其中一个页面上的元素排在底部。真实世界的例子是 http://www.silverartcollector.com .您可以在主页上看到内容区域，有 2 个具有不同尺寸图像的产品框，这将是常见的。我想让底部对齐，这样看起来更整洁。我试过在我的主类上做垂直对齐:底部但它不起作用，我假设是因为 float:left。但是，经过几个小时的测试，我无法弄清楚。我感谢任何输入/帮助。

页面代码如下:

<div class="float_r" id="content">
<h3>Recent Additions</h3><br>

<div class="product_box">
<a href="productdetail.php?id=1"><img width="150" src="admin/uploads/ONE-7 O.JPG"></a>
<h3>Huck Finn</h3>
<p class="product_price">One Mint</p>
<!--<a href="#" class="add_to_card">ONE-7</a><br/>-->
<a class="detail" href="productdetail.php?id=1">Details</a>
</div>          

<div class="product_box">
<a href="productdetail.php?id=20"><img width="150" src="admin/uploads/MLM-11 O.jpg"></a>
<h3>Keep Me &amp; Never Go Broke</h3>
<p class="product_price">Mother Lode Mint</p>
<!--<a href="#" class="add_to_card">MLM-11</a><br/>-->
<a class="detail" href="productdetail.php?id=20">Details</a>
</div>          


</div>

这是样式表:

/*

Credit: http://www.templatemo.com

*/



body {

    margin: 0;

    padding: 0;

    color: #999;

    font-family: Tahoma, Geneva, sans-serif;

    font-size: 12px;

    line-height: 1.4em; 

    background-color: #2e2e2e;

    background-repeat: repeat;

    background-image: url(../images/templatemo_body.jpg)

}



a, a:link, a:visited { 

    color: #08aee3; 

    font-weight: normal; 

    text-decoration: none; 

}



a:hover { 

    text-decoration: underline; 

}



a.more { 

    display: inline-block; 

    width: 80px; 

    height: 28px; 

    line-height: 28px; 

    text-align: center; 

    font-size: 10px; 

    font-weight: bold; 

    color: #21bdd0; 

    background: url(../images/more_but.jpg); 

}

a.more:hover { 

    background: #333; 

    text-decoration: none; 

}



p { 

    margin: 0 0 10px 0; 

    padding: 0; 

}



img { 

    border: none; 

}



blockquote { 

    border: 1px solid #ccc; 

    border-left: 5px solid #000; 

    padding: 19px; 

    margin: 20px 0 0 0;

}



cite a, cite a:link, cite a:visited  { 

    font-size: 12px; 

    text-decoration: none; 

    font-style: normal; 

}



cite span { 

    font-weight: 400; 

    color: #333; 

}



.templatemo_list { 

    margin: 10px 0 10px 15px; 

    padding: 0; 

    list-style: none; 

}



.templatemo_list li { 

    color:#636363; 

    margin: 0 0 5px 0; 

    padding: 0 0 0 15px; 

    background: url(../images/templatemo_list.png) no-repeat scroll 0 7px;  

}



.templatemo_list li a { 

    color: #636363; font-weight: normal; 

}



.templatemo_list li a:hover { 

    color: #000; 

}



h1, h2, h3, h4, h5, h6, h7, h8{ 

    color: #333; 

    font-weight: normal; 

}



h1 { 

    font-size: 30px; 

    margin: 0 0 30px; 

    padding: 5px 0; 

}



h2 { 

    font-size: 26px; 

    margin: 0 0 25px; 

    padding: 5px 0;

}



h3 { 

    font-size: 20px; 

    margin: 0 0 20px; 

    padding: 0; 

}



h4 { 

    font-size: 16px; 

    margin: 0 0 15px; 

    padding: 0; 


}



h5 { 

    font-size: 14px; 

    margin: 0 0 10px; 

    padding: 0; 

}



h6 { 

    font-size: 12px; 

    margin: 0 0 5px; 

    padding: 0; 

}

h7 { 

    font-size: 16px; 

    margin: 0 0 15px; 

    padding: 0; 

    line-height:150%

}


h8 { 


    line-height:150%;

    font-size: 14px; 

    margin: 0 0 15px; 

    padding: 0; 

    color: white;



}


.cleaner { clear: both }

.h10 { height: 10px }

.h20 { height: 20px }

.h30 { height: 30px }

.h40 { height: 40px }

.h50 { height: 50px }



.float_l { float: left }

.float_r { float: right }



#templatemo_wrapper {

    width: 960px;

    margin: 0 auto;

    padding: 0 10px 10px;

}



#templatemo_header {

    width: 100%;

    padding: 50px 0 10px;

}



#templatemo_menu {

    width: 100%;

    height: 77px;

    margin-bottom: 3px;

    background: url(../images/templatemo_menu.jpg) repeat-x

}



#templatemo_middle {

    width: 100%;

    height: 200px;

    margin-bottom: 3px;

    padding-bottom: 2px;

    background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom

}



#templatemo_main {

    width: 100%;

    margin-bottom: 10px;

}



#content { 

    width: 680px; 

    background: #ffffff; 

    border: 1px solid #fff; 

    padding: 15px; 

}


#sidebar { width: 240px }



#templatemo_footer {

    width: 960px;

    text-align: center; 

    padding: 9px 0px;

    background: #121212;

    border: 1px solid #3a3a3a

}



#site_title { 

    float: left; 

}



#site_title h1 { 

    margin: 0; 

    padding: 0; 

}



#site_title h1 a { 

    display: block; 

    width: 300px; 

    height: 20px; 

    font-size: 12px; 

    text-indent: -10000px; 

    color: #999; 

    text-align: left; 

    background: url(../images/logo.gif) no-repeat top left; 

}



#header_right { 

    float: right; 

    margin-top: 5px; 

}



#header_right a { 

    color: #ccc; 

}



#menu_second_bar { 

    padding: 5px 10px; 

}



#top_shopping_cart { 

    float: left;

    padding: 5px 0; 

    font-size: 11px; 

}



#templatemo_search { 

    float: right; 

}



#templatemo_search form {

    margin: 0;

    padding: 0;

}



#templatemo_search .txt_field {

    float: left;

    display: block;

    margin-right: 5px;

    height: 24px;

    line-height: 24px;

    width: 300px;

    color: #999;

    font-size: 12px;

    padding: 0 5px;

    font-variant: normal;

    border: 1px solid #666; 

    background: #333;

}



#templatemo_search .sub_btn {

    float: right;

    display: block;

    color: #fff;

    height: 26px;

    font-size: 11px;

    font-weight: 700;

    line-height: 26px;

    cursor: pointer;

    border: 1px solid #333;

    background: #0ec4f7;    

}



.sidebar_box {

    position: relative;

    background: #4c4a4a;

    margin-bottom: 20px;

}



.sidebar_box h3 { 

    font-size: 14px; 

    font-weight: 700; 

    padding: 10px; 

    width: 220px; 

    height: 20px; 

    margin-bottom: 0; 

    background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999 

}



.sidebar_box span.bottom {

    position: absolute;

    bottom: -26px;

    left: 0;

    width: 240px;

    height: 26px;

    background: url(../images/templatemo_sidebar_bottom.jpg)    

}



#sidebar .sidebar_box .content {

    padding: 10px 10px 0;

}



#sidebar .sidebar_list { 

    margin: 0; 

    padding: 0; 

    list-style: none; 

}



#sidebar .sidebar_list li { 

    display: block; 

    margin: 0; 

    padding: 3px 0; 

    border-top: 1px solid #595858; 

    border-bottom: 1px solid #343434;

}



#sidebar .sidebar_list li.first { 

    border-top: none; 

}



#sidebar .sidebar_list li.last { 

    border-bottom: none; 

}



#sidebar .sidebar_list li a { 

    color: #d6d3d3;   

}



#sidebar .sidebar_list li a:hover { 

    color: #fff; 

    text-decoration: none; 

}



.bs_box { clear: both; margin-bottom: 20px }

.bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d }

.bs_box h4 { margin-bottom: 0 }

.bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700}

.bs_box .price { font-size: 12px; font-weight: 700; color: #fff }



.product_box {

    float: left;



    width: 225px;

    text-align: center;

    margin: 0 0px 0px 0;


}



.product_box img {

    margin-bottom: 5px;

}



.product_box h3 {

    font-size: 11px;

    color: #000;

    font-weight: 700;

    margin-bottom: 10px;

}



.product_box .product_price {

    color: #8fb410;

    font-size: 14px;

    font-weight: 700;



}



.product_box .add_to_card {


    float:left;

    display: block;

    width: 140px;

    height: 28px;

    line-height: 28px;  

    text-align: center;

    color: #fff;

    background: url(../images/add_to_cart.jpg);

    margin-left: 42.5px;

}


.product_box .detail {


    float: left;

    display: block;

    width: 140px;

    height: 28px;

    line-height: 28px;

    text-align: center; 

    background: url(../images/detail.jpg);

    margin-left: 42.5px;

}



.checkout input { 

    border: 1px solid #ccc; 

    margin-bottom: 15px; 

    padding: 5px; 

}



#contact_form { 

    padding: 0; 

    width: 312px; 

    margin-bottom: 40px; 

}



#contact_form form { 

    margin: 0px; 

    padding: 0px; 

}



#contact_form form .input_field { 

    width: 300px; 

    padding: 5px; 

    color: #222;  

    background: #fff; 

    border: 1px solid #dedede;  

    font-size: 12px;

    font-family: Tahoma, Geneva, sans-serif;

    margin-top: 5px; 

}



#contact_form form label { 

    display: block; 

    width: 100px; 

    margin-right: 12px; 

    font-size: 13px; 

}



#contact_form form textarea { 

    width: 300px; 

    height: 200px; 

    padding: 5px; 

    color: #222; 

    background: #fff; border: 1px solid #dedede;  

    font-size: 12px;

    font-family: Tahoma, Geneva, sans-serif;

    margin-top: 5px; 

}



#contact_form form .submit_btn { 

    padding: 5px 12px; 

    background-color: #000; 

    border: 1px solid #fff; 

    color: #fff; 

    font-size:14px; 

    margin: 10px 0px;

}



.faq h3 { font-size: 14px; margin: 30px 0 5px }



.content_half { 

    width: 320px; 

}



.content_13 { 

    width: 220px; 

    margin-right: 10px; 

}



.no_margin_right { 

    margin-right: 0; 

}



#templatemo_footer { 

    color: #707070; 

}



#templatemo_footer a {

    color: #999; 

}


.question {
position:relative;
display: inline-block;
text-align:center;
left:-1em;
top:-5em;
padding: 10px 0px 0px 0px;
width: 174px;
height: 58px;
color:black;
font-weight:bold;
font-size: 13px;
line-height: 1.3em;
background: url('../admin/images/bubble.png') left top no-repeat;
opacity:0;
z-index:1;
}


.yes{
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #434d17;
text-shadow: 0px 1px 0px #fff;
background: url('../admin/images/buttony.png') left top no-repeat;
}


.cancel {
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #fff;
text-shadow: 0px 1px 0px #000;
background: url('../admin/images/buttonn.png') left top no-repeat;


}

.mint_box {

    float: left;

    width: 300px;

    text-align: left;

    margin: 0 10px 10px 0;

}

}

最佳答案

我认为 inline-block 方法可以满足您的需求:

.product_box {
    display: inline-block;
    margin: 0;
    text-align: center;
    vertical-align: bottom;
    width: 225px;
}

关于html - 底部对齐有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15182540/

上一篇：javascript - 如何在不更改 html 的情况下使用 jquery 删除 &lt;textarea&gt; 中内容之前的多余空格

下一篇：css - chrome 中的按钮大小

相关文章：

mysql - 如何在AWS上创建一个网页UI，可以显示来自AWS中的MYSQL的数据

jquery - 如何用图像填充 div 而 div 在响应页面上保持其 1 :1. 5 的比例

css - 使用 ":before"制作的元素符号的 Ul li - 如何缩进第二行文本

css - 在 Ionic 中垂直对齐行中的列

javascript 在网络应用程序中不起作用

javascript - CSS 问题 : can't place text right of select box

html - 即使在最后一个序列中，CSS 样式表也会被覆盖

css - 垂直对齐复选框

javascript - 访问父窗口的div

html - 使用 bootstrap 嵌套评论的嵌套行

©2024 IT工具网  联系我们