CSS流式布局

Question

我正在尝试在CSS中实现一些相当棘手但也相当“简单”的内容：

说明：

某个带有文本的元素（宽度未知），两侧各有2个元素，占据其余空间。

我想使用display：table作为容器，并对3个子元素使用display：table-cell，但它并不起作用，或者我不知道如何正确使用它。

- vsync

---

展示你的HTML代码，我们可以从那里开始。 - Carol McKay

@CarolMcKay 的问题是基于概念的，而非失败实现的基础。 - Austin Brunkhorst

好的，我已经放了一个游乐场的链接。 - vsync

我更愿意等待，因为支持还比较薄弱：http://caniuse.com/#feat=flexbox - vsync

@vsync - 是的。只是你说它不是标准，只是一个实验... 好吧，我忍不住内心的渴望要“好吧，实际上”（http://tirania.org/blog/archive/2011/Feb-17.html）你一下。 - Joseph Silber

Answer 1

演示游乐场

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; }

- vsync

---

@vsync 在他的演示中添加了过渡效果，将这个演示变成了纯艺术。 - neoswf

Answer 2

这里使用了 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;
}

演示

- 3dgoo

---

不行，不行，试过了……失败了。要写一个完整的句子，不能只说两边各50%。 - vsync

等一下！如果我使用 white-space:pre 强制文本，它就可以工作。 - vsync

Answer 3

<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;
    }

- Carol McKay

---

@vsync - 这是scss，醒醒吧 ;) 比纯css容易多了。 - neoswf