Question

我有一个主div，其宽度是屏幕宽度的70％。主div的内部是＆lt; div id =“div1”＆gt;和＆lt; div id =“div2”＆gt;，每一个具有250px的固定像素宽度。我想在div1的左边有一个排水沟（空的空间），在div2的右边，在div1和div2之间。我希望布局如下：

＆lt; - buffer1 - ＆gt;＆lt; - div1 - ＆gt;＆lt; - buffer2 - ＆gt;＆lt; - div2 - ＆gt;＆lt; - buffer3 - ＆gt;

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

以下是我想如何调整缓冲区的大小：

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

缓冲器1 =（DW-500）/ 4
缓冲器2 =（DW-500）/ 2
buffer3 =（DW-500）/ 4

任何人都可以建议我如何实现这一目标吗？谢谢！

Answer 1

这很容易用flexbox实现。

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，我没有遇到麻烦，包括Flexbox属性的前缀版本 - 您可能需要/需要自己添加（应该可以轻松搜索），如果您需要在当前浏览器中工作。< / p>

CSS混合固定大小的列和可变大小的排水沟

1 个答案: