2.佈局解決方案- 等分
第一種方式 float +box-sizing
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.column{
width: 25%;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.column p{
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
</div>
</body>
</html>
但是具有耦合性去掉一列的話還要修改樣式這是它的不足之處
第二種方式 display:table
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.parent{
display: table;
width: 100%;
}
.column{
display: table-cell;
padding-left: 10px;
}
.column p{
background: greenyellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
</div>
</body>
</html>
第三種方式 flex
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,p{
padding: 0;
margin: 0;
}
.parent{
display: flex;
}
.column{
background: yellowgreen;
flex: 1;
margin-left: 10px;
}
.column p{
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
<div class="column"><p>內容1</p></div>
</div>
</body>
</html>
相關文章
- 佈局的常用解決方案
- css經典佈局系列二——等分等高佈局CSS
- CSS常見佈局解決方案CSS
- CSS 佈局解決方案(終結版)CSS
- 總結下常見佈局解決方案
- Android RecyclerView多型別佈局卡片解決方案AndroidView多型型別
- android studio佈局突然顯示不全解決方案Android
- 移動端web自適應適配佈局解決方案Web
- 網頁佈局自適應的另一種解決方案網頁
- hotcss.js------移動端佈局優秀的解決方案CSSJS
- Html佈局左右寬度固定中間自適應解決方案HTML
- 【整理】CSS佈局方案CSS
- vue移動端的自適應佈局的兩種解決方案Vue
- 英特爾佈局5G提供端到端的解決方案
- Web 開發者如何理解 Flutter 佈局之 —— 2. ContainerWebFlutterAI
- CSS 5種佈局方案CSS
- 佈局方案的思路整理
- 三欄佈局 五中解決方式
- 移動端佈局方案探究
- 移動端(手機端)頁面自適應解決方案—rem佈局篇REM
- css3的flex彈性佈局實現貼邊均勻等分列表CSSS3Flex
- Flutter 佈局詳解Flutter
- Flutter佈局篇(1)–水平和垂直佈局詳解Flutter
- Flutter佈局篇(1)--水平和垂直佈局詳解Flutter
- android佈局------RelativeLayout(相對佈局)詳解Android
- 「前端那些事兒」③ CSS 佈局方案前端CSS
- ExtJs佈局詳解JS
- 兩列自適應佈局方案整理
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- 重磅公佈6大核心能力,12大解決方案,騰訊雲戰略佈局出海市場
- 居中佈局、三欄佈局
- qt 佈局---表單佈局QT
- java:佈局方法(流佈局)Java
- flex佈局(彈性佈局)Flex
- 佈局技巧:合併佈局
- 詳解CSS的Flex佈局CSSFlex
- 詳解RecyclerView的預佈局View