Question

我想创建以下三列布局。中间列将具有可变大小并居中。左列和右列将增大或缩小以满足中间列的边缘和外部父div的边缘。它看起来应该是这样的。

-------------------------------------------------------------
| Size: X        |     Variable Size   |           Size: X  |          
-------------------------------------------------------------

我尝试过几种不同的方法但没有一种方法可行。

编辑：澄清我试图达到文本两侧以两条水平线为中心的标题的效果。

https://css-tricks.com/line-on-sides-headers/

我想知道是否可以使用三个嵌套的div。

Answer 1

<div>
  <table>
    <tr>
      <td width="20%">COLUMN 1</td>
      <td width="*">COLUMN 2</td>
      <td width="20%">COLUMN 3</td>
    </tr>
  </table>
</div>

Answer 2

只需使用显示表和表格单元格。除非您有表格数据，否则不要使用实际表格，这不是最佳做法，也很难做出响应。

        .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>

Answer 3

您可以采取几种不同的方法。实际上，我能想到的是。

对于接下来的几个例子，标记是这样的：

<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

Answer 4

*{
    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>

Answer 5

根据

左右列会增长或缩小以满足边缘中间列和外部父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">&nbsp;</div>
<div class="middle">&nbsp;</div>
<div class="side">&nbsp;</div>
</body>
</html>

用于三列显示的CSS

5 个答案: