html 图片边框间距,html – 将边框间距应用于某些单元格

我想疯狂地试图获得以下布局：

>左边有固定宽度的div(可能有多个div除了另一个)

>具有自动宽度的中心div(占用剩余空间)

>具有固定宽度的右div(可能在另一个旁边有多个div)

>中心div和第一个邻居之间应该有一个边距,无论是左边还是右边

Left1

Left2

Center

Right1

Right2

CSS

.container {

display: table;

position: relative;

width: 100%;

height: 100px;

border-spacing: 5px;

}

.all {

display: table-cell;

border: 1px solid #333;

margin: 5px;

}

.left {

width: 45px;

}

.right {

width: 45px;

}

.center {

width: auto;

}

小提琴

但是,无论我尝试什么(例如,将边框间距：左边或右边的0px,边距：0,边框折叠),我的所有边距都会相同.

为了简化它,我想要这个：

+--------------------------------------------------------------+

|+-----++-----+ +------------------------------++-----++-----+|

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|| || | | || || ||

|+-----++-----+ +------------------------------++-----++-----+|

+--------------------------------------------------------------+

但目前我有这个：

+--------------------------------------------------------------+

| |

| +----+ +----+ +--------------------------+ +----+ +----+ |

| | | | | | | | | | | |

| | | | | | | | | | | |

| | | | | | | | | | | |

| | | | | | | | | | | |

| | | | | | | | | | | |

| | | | | | | | | | | |

| +----+ +----+ +--------------------------+ +----+ +----+ |

| |

+--------------------------------------------------------------+

如何在此布局中控制单个边距？

附：

>我不希望混合浮点数与非浮点数的解决方案,因为它最终会出现布局问题,see this

>我不希望css calc的解决方案,因为它是实验性的

>我不想要JS解决方案,因为我认为CSS应该用于这种布局并且可能导致闪烁;此外,用户可以禁用JS