CSS 混合固定大小的列和可变大小的装订线

Question

我有一个宽度为屏幕宽度 70% 的主 div。 主div里面是

和

，每一个 具有 250 像素的固定像素宽度。我想要 div1 左侧的排水沟（空白区域）， 在 div2 的右侧，在 div1 和 div2 之间。 我希望布局如下：

页面应该是响应式的，因此屏幕宽度会减小 装订线尺寸将减小，但 div1 和 div2 将保持 250px 宽。 当屏幕宽度低于 500 像素时，我将使用媒体样式来更改布局。

这是我想要调整缓冲区大小的方式：

假设主 div 的宽度为 DW。
那么三个缓冲区的总大小为DW-500。
我希望缓冲区 1 和缓冲区 3 的大小相同，缓冲区 2 的大小是两倍 buffer1 的大小。换句话说：

buffer1=(DW-500)/4
缓冲区2=(DW-500)/2
缓冲区3=(DW-500)/4

谁能建议我如何做到这一点？谢谢！

【问题讨论】：

• 你会为 div 做一些诸如 margin left 和 dright 之类的事情，以保持它的响应。要使此功能在所有设备上都能正常工作，您可能需要针对移动设备/平板电脑/台式机调整这些百分比
• 顺便说一句 - 对于手机，你不能同时拥有 2 个 250 像素宽的 div 和边距，这根本不适合
• 当屏幕宽度

Answer 1

这很容易通过 flexbox 实现。

#main {
    display: flex; /* make the element a flexbox container */
    justify-content:space-around; /* distribute space around children */
    width:70%;
    margin:auto; /* center horizontally (if desired) */
    background:blue;
}
#div1, #div2 {
    width:50px; /* smaller width then your 250px, 
                   so that the example works better on smaller screens – adapt to need */
    height:50px;
    background:red;
}

<div id="main">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

请注意，我没有遇到麻烦来包含 flexbox 属性的前缀版本——如果您需要在当前浏览器中工作，您可能希望/需要自己添加这些（应该很容易研究）。