CSS中可以使用display: inline-block;
屬性讓兩個(gè)邊框并列,這個(gè)屬性可以將元素設(shè)置為內(nèi)聯(lián)塊級(jí)元素,使其既可以在一行內(nèi)顯示,又可以有塊級(jí)元素的特性,如設(shè)置寬度和高度。
以下是一個(gè)示例代碼:
<div style="display: inline-block; border: 1px solid #000; width: 50px; height: 50px;"></div> <div style="display: inline-block; border: 1px solid #000; width: 50px; height: 50px;"></div>
在這個(gè)示例中,兩個(gè)div
元素都設(shè)置了display: inline-block;
屬性,并且都有邊框、寬度和高度,這樣,這兩個(gè)元素就會(huì)在一行內(nèi)顯示,并且每個(gè)元素都有自己的邊框。
還可以使用float: left;
或float: right;
屬性讓元素浮動(dòng)在一行內(nèi),并且可以設(shè)置元素的寬度和高度,這種方法也可以實(shí)現(xiàn)兩個(gè)邊框并列的效果。
<div style="float: left; border: 1px solid #000; width: 50px; height: 50px;"></div> <div style="float: right; border: 1px solid #000; width: 50px; height: 50px;"></div>
在這個(gè)示例中,兩個(gè)div
元素分別設(shè)置了float: left;
和float: right;
屬性,這樣它們就會(huì)分別浮動(dòng)在左側(cè)和右側(cè),并且每個(gè)元素都有自己的邊框。
需要注意的是,在使用浮動(dòng)布局時(shí),可能需要清除浮動(dòng),以避免影響其他元素的布局,可以使用clear: both;
屬性來清除浮動(dòng)。