我试图在 CSS 中实现一些非常棘手的东西,但也非常“简单”:
解释:
一些带有文本的元素(未知宽度),每边有 2 个元素,都占据了剩余空间。
我想和display:table
容器一起去,三个孩子一起去,display:table-cell
但它不起作用,或者我不知道如何正确使用它..
<header>
<h1>Some title</h1>
</header>
header{
display:table;
text-align:center;
width:50%;
}
header:before, header:after{
content:'';
display:table-cell;
background:red;
width:50%;
border-radius:5px;
}
header > h1{ white-space:pre; padding:0 10px; }
这是使用display: table
anddisplay: table-cell
来制作这个栏和文本。
HTML
<div class="textBarContainer">
<div class="textBarBefore"></div>
<div class="textBar">Text</div>
<div class="textBarAfter"></div>
</div>
CSS
.textBarContainer {
display: table;
width: 100%;
}
.textBar {
display: table-cell;
padding: 0 10px;
white-space: pre;
}
.textBarAfter, .textBarBefore {
background: #cc0000;
width: 50%;
height: 20px;
display: table-cell;
content:' ';
border-radius: 5px;
}
<ul class="columnlayout">
<li>
<div>Left content</div>
</li>
<li class="centercontent">
<div>middle text content</div>
</li>
<li>
<div>Right content</div>
</li>
</ul>
//columns layout
ul.columnlayout
{
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
> li
{
float:left;
margin:0;
list-style-type:none;
width:200px;
&.centercontent
{
width:auto;
}
ul.xoxo
{
list-style-type: none;
li
{
list-style-type: none;
}
}
}
}
哦,请原谅我的 .scss!
ul.columnlayout {
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
}
ul.columnlayout li {
float:left;
margin:0;
list-style-type:none;
width:200px;
}
ul.columnlayout li.centercontent {
width:auto;
}