CSS：跨度在左固定宽度，跨度在右固定宽度，中心表填满的空间的其余部分

Question

标记：

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

希望的输出：

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

的溶液我在其他答案中看到，只有在中心元素是表格时才工作。

Answer 1

您可以使用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 2

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

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

我们可以省略display:block请检查fiddle

我在这里显示边框给你的宽度的视图

Answer 3

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

你可以左浮动你<span>和表，并设置表格的宽度，因为这：

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

通过这一解决方案，该表是真正100％的宽度，而不是背景伎俩。

这里有一个working Fiddle。

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