三列使用Divs

debugcn 发表于 Dev

克里斯·伦巴第（Chris Lombardi）

我在玩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>

斯科特·塞尔比（Scott Selby）

在这里看到小提琴，这不是您要求的所有内容的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。