Css 我一行有3个div，如何使中间div保持精确的宽度，同时随着屏幕尺寸变小，左右div收缩？_Css_Html

Css 我一行有3个div，如何使中间div保持精确的宽度，同时随着屏幕尺寸变小，左右div收缩？

css html

Css 我一行有3个div，如何使中间div保持精确的宽度，同时随着屏幕尺寸变小，左右div收缩？,css,html,Css,Html,我一排有三个div 下面是它的布局我需要中间的div保持一个固定的宽度，但是随着屏幕变小，左右的div会收缩，下面是一个例子我将如何写出css 到目前为止，我就是这样做的，顺便说一句，这3个div被另一个div#mid包装了起来 #中{ 最大宽度：100%；最小高度：395px；最大高度：395px；位置：相对位置；背景色：#F00；显示：块； } #左{ 最小宽度：35%；最小高度：395px；最大高度：395px；背景色：#00F；位置：相对位置；浮动：左； }

我一排有三个div

下面是它的布局

我需要中间的div保持一个固定的宽度，但是随着屏幕变小，左右的div会收缩，下面是一个例子

我将如何写出css

到目前为止，我就是这样做的，顺便说一句，这3个div被另一个div#mid包装了起来

#中{
最大宽度：100%；
最小高度：395px；
最大高度：395px；
位置：相对位置；
背景色：#F00；
显示：块；
}

#左{
最小宽度：35%；
最小高度：395px；
最大高度：395px；
背景色：#00F；
位置：相对位置；
浮动：左；
}

#中间{
最小宽度：30%；
最小高度：395px；
最大高度：395px；
背景色：#3F0；
位置：相对位置；
浮动：左；
}

#对{
最小宽度：35%；
最小高度：395px；
最大高度：395px；
保证金：0；
填充：0；
背景色：#0FF；
位置：相对位置；
浮动：左；
}

如果有人能帮我，我真的很感激，提前谢谢

我已经回答了这个问题，你可以这样做：

很简单

浮动三个div

将显示属性设置为“内联块”

设置中间div的宽度属性

设置左、右分区的“最大宽度”属性

以下是我测试过的HTML标记：

<body>
    <div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
    <div id="middle"></div>
    <div id="right">
        RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
    </div>
</body>

下面是实现：

它非常简单，为中间的div指定固定宽度，如

宽度：300px

…希望这会有用…

OP要求固定宽度。这是流体。请随意将宽度：60%更改为宽度：200px或300px:）我的坏！更新了jsFiddle Link.ya我在调整窗口大小后进行了检查，但在达到一定限制后，最后一个div下降了……这很有效，我在所有3个div的固定高度上遇到了问题。如何让所有3个div保持在390px的高度？@user1740297给你，如果你认为这有助于你将这个答案标记为正确，我更新了链接，并在第一个div中添加了更多演示文本，当我缩小屏幕尺寸时，它会推动高度变大。我需要保持高度fixed@user1740297仔细看，高度保持不变：）只是里面的内容被包装了

.container {
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-align:stretch; 
     display:-moz-box;      
    -moz-box-orient:horizontal;
    -moz-box-align:stretch;
    display:box;
    box-orient:horizontal;
    box-align:stretch;   
    color: #ffffff;    
}    

div {
    height: auto;
}

.first {
    background-color: #546547;   
}

.static {
    background-color: #154d67;
    width: 300px;  
}

.third {
    background-color: #c00000;   
}

.first, .third {
    -webkit-box-flex:1.0;
    -moz-box-flex:1.0;
    box-flex:1.0;
}

<body>
    <div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
    <div id="middle"></div>
    <div id="right">
        RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
    </div>
</body>

#right,
#left {
 background-color:green;
 float:left;
 display:inline-block;
 max-width:20%;
 min-height:20px;
}
#middle {
 width: 60%;
 float:left;
 display:inline-block;
 background-color:blue;
 min-height:20px;
}