用於三欄顯示的CSS
[英]CSS for three column display
問題描述
我想創建以下三列布局。 中間的列將具有可變大小並居中。 左右列將增大或縮小，以與中間列的邊緣和外部父div的邊緣相交。 它應該看起來像這樣。
------------------------------------------------------------- | Size: X | Variable Size | Size: X | -------------------------------------------------------------
我嘗試了幾種不同的方法，但是都沒有奏效。
編輯：為澄清起見，我正在嘗試實現以文本兩邊的兩條水平線為中心的標題的效果。
https://css-tricks.com/line-on-sides-headers/
我想看看是否可以處理三個嵌套的div。
5 個解決方案
解決方案1
0 2015-05-26 18:03:25
<div>
<table>
<tr>
<td width="20%">COLUMN 1</td>
<td width="*">COLUMN 2</td>
<td width="20%">COLUMN 3</td>
</tr>
</table>
</div>
解決方案2
0 2015-05-26 18:07:15
只需使用顯示表和表單元格即可。 除非您擁有表格數據，否則不要使用實際的表，這不是最佳實踐，並且很難做出響應。
.table{ display:table; width:100%; } .table-cell{ display: table-cell; text-align: center; } .cell1{ background-color: red; } .cell3{ background-color: blue; }
<div class="table"> <div class="table-cell cell1">123</div> <div class="table-cell cell2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut </div> <div class="table-cell cell3">321</div> </div>
解決方案3
0 2015-05-26 18:10:11
您可以采取幾種不同的方法。 其實我能想到的5。
在接下來的幾個示例中，標記是這樣的：
<div class="container">
<aside class="fixed column"></aside>
<main class="fluid column"></main>
<aside class="fixed column"></aside>
</div>
全球CSS
.fixed {
width: 100px;
}
.fluid {
calc(100% - 200px); /* subtract total fixed width of the sidebars */
}
Flexbox：
.container {
display: flex;
}
.container .column {
flex: 0 1 1;
}
浮動：
.container:after {
content: '';
clear: both;
display: table;
}
.container .column {
float: left;
}
表：
.container {
display: table;
}
.container .column {
display: table-cell;
}
內聯塊：
.container .column {
display: inline-block;
}
.container .column:not(:first-child) {
margin-left: -4px;
}
絕對：
.container {
position: relative;
}
.container .column {
top: 0;
position: absolute;
}
.container .fluid {
left: 100px; /* width of 1 fixed sidebar */
}
.container .fixed:last-child {
right: 0;
}
這是指向Codepen的鏈接：) http://codepen.io/akwright/pen/OPvwLv
解決方案4
0 2015-05-26 18:11:57
*{ padding: 0; margin: 0; } .table{ display: table; width: 100%; max-width: 400px; margin: 25px auto; border-top: 1px dashed #222; border-bottom: 1px dashed #222; } .table > div{ display: table-cell; vertical-align: middle; text-align: center; padding: 10px; border-right: 1px dashed #222; } .table > div:nth-child(1){ border-left: 1px dashed #222; } .table > div:nth-child(1), .table > div:nth-child(3){ width: 20%; }
<div class="table"> <div>cell</div> <div>cell</div> <div>cell</div> </div>
解決方案5
0 2015-05-26 18:28:15
根據
左右列將增大或縮小，以與中間列的邊緣和外部父div的邊緣相交。
您只想將每一列都包含在% 。 最簡單的方法似乎是：
<html>
<head>
<title>test</title>
<style>
.side {
width: 20%;
float: left;
background-color: red;
height: 100%;
}
.middle {
width: 60%;
float: left;
background-color: blue;
height: 100%;
}
</style>
</head>
<body>
<div class="side"> </div>
<div class="middle"> </div>
<div class="side"> </div>
</body>
</html>
CSS顯示三列內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.