CSS是前端開發中必不可少的技術之一。其中,設置兩個或多個div并列顯示也是常用的技巧。下面將介紹如何使用CSS來實現這個效果。
div { display: inline-block; /* 設置div為行內塊元素,可以讓其并列顯示 */ width: 50%; /* 設置div的寬度為50% */ box-sizing: border-box; /* 這里用到盒模型,將盒模型設置為border-box,可以減少盒子大小的繁瑣計算 */ padding: 20px; /* 設置div的內邊距為20px,用于調整div內部元素的位置 */ }
上面這段代碼中,使用了display屬性將所有的div設置為行內塊元素。這樣,多個div就可以并列顯示了。同時,也設置了div的寬度為50%,同時用盒模型計算邊框和內邊距,不會對盒子大小造成影響。最后用padding屬性調整內部元素的位置。
需要注意的是,div并列顯示時也需要注意父元素的寬度,以免出現樣式錯亂。可以為父元素設置一個固定的寬度,或者將其寬度設置為100%。
CSS設置div并列顯示,主要使用行內塊元素來實現,再用其他樣式屬性進行調整。
下一篇css 設置下邊框顏色