3

我一排有 3 个 div

<div id="left"></div> <div id="middle"></div> <div id="right"></div>

这是它的布局方式

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

我将如何写出CSS？

到目前为止，这就是我的方式，顺便说一下，3 个 div 被包裹在另一个 div#mid 中

#mid { max-width: 100%; min-height: 395px; max-height: 395px; position: relative; background-color: #F00; display: block; }

#left { min-width:35%; min-height: 395px; max-height: 395px; background-color: #00F; position:relative; float: left; }

#middle { min-width:30%; min-height: 395px; max-height: 395px; background-color: #3F0; position:relative; float: left; }

#right { min-width:35%; min-height: 395px; max-height: 395px; margin:0; padding:0; background-color: #0FF; position:relative; float: left; } 如果有人可以帮助我，我真的很感激，在此先感谢！

4

3 回答 3

2

在这里我已经回答了这个问题，你可以这样做：我的小提琴

<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>​

CSS

.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;
}
​
于 2012-10-12T07:10:58.470 回答
1

它非常简单地为中间 div 提供固定宽度，例如width:300px......希望这会很有用......

于 2012-10-12T08:11:45.643 回答
0

非常简单。

  1. 浮动三个div。
  2. 将显示属性设置为“内联块”。
  3. 设置中间div的宽度属性。
  4. 设置左右 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>

这是一个示例 CSS：

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

这是实现：http: //jsfiddle.net/3yEv3/

于 2012-10-12T07:47:57.717 回答