Question

标记：

<div>
    <span class="left"></span>
    <table></table>
    <span class="right"></span>
</div>

期望的输出：

|------------------------------------------------------------------------|
|      |                                                          |      |
|.left |                                                          |.right|
|      |                                                          |      |
|      |                       table                              |      |
|      |                    dynamic width                         |      | 
|width |                                                          |width |
| 1em  |                                                          | 1em  |
|      |                                                          |      |
|      |                                                          |      |
|      |                                                          |      |
|      |                                                          |      |
|------------------------------------------------------------------------|

当中心元素是一个表时，我在其他答案中看到的解决方案就不起作用了。

Answer 1

解决方案是display:block;和position。实际上，在这种情况下你应该使用div，如果你使用div

，我们可以省略display:block

.left{
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:20px;
    border:1px solid black;
}
.right{
    position:absolute;
    right:0;
    top:0;
    display:block;
    width:20px;
    border:1px solid black;
}

div{
    padding-left:20px;
    padding-right:20px;
}

table{
    width:100%;
    border:1px solid black;
}

请查看fiddle

这里我显示边框，为您提供宽度视图

Answer 2

您可以使用float，也可以使用span作为容器不是一个好主意。而是使用div。同时将table放入div：

.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 100px;
  background: yellow;
}
.right {
  float: right;
  width: 100px;
  background: yellow;
}
.main {
  background: orange;
  margin: 0 100px;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="main">
    Hello World
  </div>
</div>

Answer 3

如果要保留标记，可以使用calc()属性。

您可以向左移动<span>和表格，并将表格的宽度设置为：

table {border-collapse:collapse; width:calc(100% - 2em); float:left;}

使用此解决方案，表格实际上是100％宽度，而不是背景技巧。

这是working Fiddle。

我同意评论说使用<span>这是一个坏主意，但......我认为你有理由;）

CSS：左边有固定宽度，右边有固定宽度，中心表填满了剩下的空间

3 个答案: