html - 了解相对和绝对定位 : how to align an internal div to the bottom of the container

Question

仍在学习如何使用 div 和 css 进行布局。我有以下 html:

<div id="Fascione">
</div>
<div id="Wrapper">
    <div id="Menu">
    </div>
    <div id="Contenuto">
        <div id="Liturgia">
        </div>
        <div id="Container">
            <div id="Ristorante">
            </div>
            <div id="Insieme">
            </div>
            <div id="Progetto">
            </div>
        </div>
        <div id="Unitre">
        </div>
    </div>
</div>
<div id="Footer">
</div>

CSS 看起来像:

html, body{width:100%;height:100%;}
body{width:1024px; margin:0px auto;padding:0px;border-width:0px;}
div#Fascione{width:inherit;height:125px;border-bottom:2px solid black;}
div#Wrapper{width:inherit;padding:8px 0px 8px 0px;/*background-color:#647;*/}
    div#Menu{float:left;width:200px;/*background-color:#F41;*/}
    div#Contenuto{margin-left:208px;/*background-color:#9bb;*/}
         div#Liturgia{float:left;width:34%;margin-bottom:1%;background-color:#987;}
         div#Container{float:left;width:65%;margin-bottom:1%;margin-left:1%;background-color:#aaaaaa;}
            div#Ristorante{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#123;}
            div#Insieme{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#abc;}
            div#Progetto{float:left;border-top:1px solid gray;background-color:#369;}
     div#Unitre{clear:left;border-top:1px solid gray;background-color:#de7;}
div#Footer{clear:left;width:inherit;height:40px;border-top:2px solid black;/*background-color:#1a9;*/} /* clear left needed! */

我想做的是让“Progetto”div 底部边框与“Unitre”顶部边框粘在一起。

阅读其他帖子时，我尝试将“Container”设置为 position:relative 并将“Progetto”设置为 position:absolute;bottom:0px;但这并不能满足我的需要。

谁能帮帮我？

Answer 1

使用相对位置设置容器不是一个好的做法。您应该尝试做的是将两个 div 之间的边距归零，并且只在需要的边上添加边框，例如:

    Proggetto{
//no bottom border;
border:1px 1px 0 1px;
border-color:black;
margin:0;
}
Unitre{
border:1px solid black
margin:0;
}