[HTML CSS]內容元素對齊於角落位置 | 不使用float tag

本來在寫網頁時
都會使用float來對齊左或右邊
後來才知道使用float會忽略元素高度
所以這邊分享一下將元素靠邊的做法
(CSS部分)
.outside{
    position: relative;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    left:0px;
    top:0px;
    height: 500px;
    width: 500px;
}
.inside1{
    border-style: dashed;
    border-width: 2px;
    height:100px;
    position: relative;
    border-color: red;
}
.inside1 span[class="span1"]{
    position: absolute;
    right:0px;
    bottom:0px;
}
.inside1 span[class~="span2"]{
    position: absolute;
    left:0px;
    bottom:0px;
}

(HTML部分)




<body>
    <div class="outside">
        <div class="inside1">
            <span class="span1">
                <label>Hello World!</label>
            </span>
            <span class="span2">
                <label>Hello World2!</label>
            </span>
        </div>
        <label>Other Content</label>
    </div>
</body>



(結果)





外層使用relative，內層使用absolute來定位











































留言








張貼留言