Question

我正在使用Divs和CSS而不是表格，我的代码/ CSS遇到了一些问题。我试图设置它，所以我在一个容器中彼此旁边有3列，该容器以文本对齐到底部的页面为中心，因此文本与我正在使用的图像底部的高度大致相同中心栏。我无法实现这一点，我对UI人员有了新的尊重。我的代码和CSS如下。任何指导都会有所帮助：）

           body {
        }
        #Container
        {
        border:1px solid #dddddd;
        padding:40px 94px 40px 94px; 
        background:#ffffff;
        width:55%;
        height:auto;
        border-radius:0px;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        }
        #Address
        {
        border:1px solid #dddddd;
        position:relative;
        text-align:left;
        width: 33%;
        }
        #Phone
        {
        border:1px solid #000000;
        position:relative;
        text-align:right;
        width: 33%;
        }
        #Logo
        {
        border:1px solid #4cff00;
        position:relative;
       float: left;
        width: 33%;
        }

HTML

    <div id="Container">
        <div id="Address">123 Testing Street</div>
        <div id="Phone">(ccc) 223-3323</div>
        <div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
    </div></blockquote>

Answer 1

看小提琴here，这不是你要求的100％，但这是一个重要的开始！只有使用div才能看到桌子的外观。我不打算为你完成每一个细节，但这应该让你去，它几乎完成。

#Container{
   border:1px solid #dddddd;
   padding:5px; 
   background:#bbb;
   width:55%;
   margin: 0px auto;
   position:relative;
   height:200px;
        }
.cell{
   display:inline-block;
   width:32%;
   height:100%;
   border:1px solid #000;
   position:relative;
   vertical-align:bottom;
   line-height:370px;}

 <div id="Container">
    <div id="Address" class="cell">123 Testing Street</div>
    <div id="Phone"  class="cell">(ccc) 223-3323</div>
    <div id="Logo"  class="cell">
        <img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
    </div>
</div>

Answer 2

我简化了你的CSS。看看这是否是您正在寻找的。

#Container{
    margin:0 auto;
    width:500px;
    background:gray;
}
#Address, #Phone, #Logo{
    float:left;
    width:33%;
    height:256px;
    line-height:512px;
}

http://jsfiddle.net/39M9L/1/

与图像对齐的部分问题是徽标周围有空白区域，因此为了使文本与徽标的边缘对齐，您将不得不调整数字，而不是依赖图像高度。

Answer 3

你可以在div中添加一个span，并使用margin-top将它放在div的底部。

CSS：

#Container > div {    
    min-height: 52px;
    float: left;       
    text-align: center;
}
#Container > div > span {
    display: inline-block;
    margin-top: 35px;

}

看看：[JSFIDDLE]（http://jsfiddle.net/blck/txXE2/）

使用Div的三列

3 个答案: