css fluid布局
css fluid布局
提问于 2013-01-18 12:00:41
我正在尝试用CSS实现一些相当棘手的东西，但也很“简单”：
解释：
一些包含文本的元素(宽度未知)，两边各有2个元素，这两个元素都占用剩余空间。
我想为容器和3个使用display:table-cell的孩子使用display:table，但是它不起作用，或者我不知道如何正确使用它。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-18 12:23:47
Demo playground
HTML
<header>
<h1>Some title</h1>
</header>CSS
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; }Stack Overflow用户
发布于 2013-01-18 12:15:30
这是使用display: table和display: 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;
}Stack Overflow用户
发布于 2013-01-18 12:10:53
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14392163
复制相关文章
相似问题
腾讯云开发者
