html - 三列使用 Div

Question

我正在尝试使用 Div 和 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

参见 fiddle 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>