CSS 等分布局的基础知识

发表时间: 2024-05-01 09:37

等分布局就是指一行被分为若干列, 每一列的宽度是相同的值

float 属性实现等分布局效果

display 属性的值有关 table 实现等分布局效果

<div id="parent">    <div class="column"></div>    <div class="column"></div>    <div class="column"></div>    <div class="column"></div></div>

通过以下 CSS 代码实现两列布局效果

.column{    float: left;    width: 25%;    box-sizing: border-box; /* content-box: 宽度和高度分别应用到元素的内容框, 为默认值。border-box: 为元素设定的宽度和高度决定了元素的边框盒。 */}

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>等分布局的第一种解决方法</title><style>.col1,.col2,.col3,.col4 {    height: 300px;    width: 25%;    float: left;}.col1 {    background-color: hotpink;}.col2 {    background-color: lightblue;}.col3 {    background-color: green;}.col4 {    background-color: yellow;}</style></head><body><!-- 作为父级容器 --><div id="parent"><div class="col1"></div><div class="col2"></div><div class="col3"></div><div class="col4"></div></div></body></html>

CSS 等分布局的基础知识

热门阅读

推荐阅读