Html 如何获得css 3列布局与浮动和没有边距？

我对css不是很有经验，在尝试使用固定宽度的左右列和动态中间列进行布局时遇到了以下问题

我能做到这一点的唯一方法是在中间的div上使用边距，以避免与边栏重叠。我想有一个更干净的方法来实现这一点，但我还没有找到解决办法

请参阅此处的JSIDLE，左侧留有边距，右侧无边距：

HTML
有边际
没有边际
css
.left{float:left；宽度：134px；高度：191px；背景色：#0000ff；不透明度：0.5}
.medium{高度：50px；背景色：#ff0000；左边距：134px}
.right{float:right；宽度：183px；高度：191px；背景色：#ffffff00；不透明度：0.5}

---

谢谢

添加

显示：flex到中间容器应该可以做到这一点

请务必检查浏览器支持


。左{
浮动：左；
宽度：134px；
高度：191px；
背景色：#0000ff；
不透明度：0.5
}
.中{
高度：50px；
背景色：#ff0000；
显示器：flex；
}
.对{
浮动：对；
宽度：183px；
高度：191px；
背景色：#ffff00；
不透明度：0.5
}
带边距的

没有边际
flexbox
可以做到这一点。不需要浮动或保证金


*{
保证金：0；
填充：0；
}
梅因先生{
高度：191px；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
边框：2倍纯绿；
}
.main>div{
边框：1px纯灰；
}
.左{
-webkit-box-flex:0；
-webkit flex:01 134px；
-ms-flex:01134像素；
弹性：01134像素；
背景色：#0000ff；
不透明度：0.5
}
.中{
-webkit-box-flex:1；
-webkit flex:10自动；
-ms-flex:10自动；
弹性：10自动；
高度：50px；
背景色：#ff0000
}
.对{
-webkit-box-flex:0；
-webkit flex:0 183px；
-ms-flex:0183px；
flex:0183像素；
背景色：#00ff00；
不透明度：0.5
}

当我尝试此操作时，它仍然在右框下流动。它不支持较低版本。但是更高的版本可以。Safari不支持Flex，说它可以在Safari上查看。我知道这是正确的做法，但是在代码中添加了webkit，但是safari没有。但是对于其他浏览器来说，这是一个很好的解决方案，是的，我们从不关心IE:）为了简洁起见，我没有添加所有必要的厂商前缀。尝试更新此答案。这很好。我发现的一个问题是，如果我尝试在其中一个侧栏上使用transform:translate（200px，0px）（单击按钮后），中间栏不会更新其宽度以填充剩余空间。translate不会增加大小或实际移动对象…我只是在视觉上移动元素。如果这是一个问题，你最好单独问一个新问题
HTML
<div class="left">With margin</div>
<div class="right">No margin</div>
<div class="middle"></div>

css
.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { height: 50px; background-color: #ff0000; margin-left: 134px}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}

.left { float: left; width: 134px; height: 191px; background-color:#0000ff; opacity: 0.5}
.middle { float:left; width: calc(100% - (134px + 183px)); height: 50px; background-color: #ff0000;}
.right { float: right; width: 183px; height: 191px; background-color:#ffff00; opacity:0.5}