如何使流体中心没有浮点数的3列布局 [英] How to make 3-Column layout with fluid center without floats

问题描述

我试图创建一个三列布局，带有静态宽度边栏和一个流体中心列。我不希望当页面变得太窄（中心列为250像素）时，列会减少，我想让整个事情冻结，并采用侧滚动。相当肯定这不能用浮动完成。这是我到目前为止：

http://jsfiddle.net/ eNDPG / 210 /

HTML：

  ; div id =header> 
标题
< / div> 
< div id =container> 
   Text1 
< / span> 
< span id =rightcol> 
 Text3 
< / span> 
< div id =centercol> 
 Text2 
< / div> 
< / div> 
< div id =footer> 
 Footer 
< / div> 
  

CSS：

 code> #container {
 overflow：hidden; 
 width：100％ 
 float：left; 
} 
 
 #leftcol {
 border：1px solid＃0f0; 
 display：inline-block; 
 float：left; 
 width：200px; 
} 
 
 #rightcol {
 border：1px solid＃0f0; 
 display：inline-block; 
 float：right; 
 width：250px; 
} 
 
 #centercol {
 border：1px solid＃000; 
 overflow：hidden; 
} 
 
 #header {
 border：1px solid pink; 
 width：100％; 
} 
 
 #footer {
 border：1px solid pink; 
 width：100％; 
} 
  

解决方案

code> float 。您可以在包装器上使用 min-width 属性设置最小宽度。

这里是一个示例： / p>

HTML：

 < div class =wrap> 
< div class =left>左< / div> 
< div class =right>右< / div> 
< div class =center>中心< / div> 
< / div> 
  

CSS：

  .wrap {
 width：100％; 
 min-width：940px; 
} 
 
 .left {
 float：left; 
 width：200px; 
} 
 
 .center {margin：0 205px; } 
 
 .right {
 float：right; 
 width：200px; 
} 
  

JSBin演示

更新： href =http://jsfiddle.net/qolami/eNDPG/218/>编辑小提琴

I am trying to create a three column layout, with static width sidebars, and a fluid center column. I do NOT want the columns dropping when the page gets too narrow (center column at 250px), I'd like to have the whole thing just freeze, and employ side scrolling. Pretty sure this can't be done with floats. Here is what I have so far:

http://jsfiddle.net/eNDPG/210/

HTML:

<div id="header">
    Header
</div>
<div id="container">
<span id="leftcol">
     Text1
</span>
<span id="rightcol">
    Text3
</span>  
<div id="centercol">
    Text2
</div>
</div>
<div id="footer">
    Footer
</div>

CSS:

#container {
overflow:hidden;
width: 100%;
float: left;
}

#leftcol {
border: 1px solid #0f0;
display: inline-block;
float: left;
width: 200px;
}

#rightcol {
border: 1px solid #0f0;
display: inline-block;
float: right;
width: 250px;
}

#centercol {
border: 1px solid #000;
overflow: hidden;
}

#header {
border: 1px solid pink;
width: 100%;
}

#footer {
border: 1px solid pink;
width: 100%;
}

解决方案

There's nothing wrong with CSS float. You could use min-width property on the wrapper to set a minimum width.

Here is an example:

HTML:

<div class="wrap">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="center">Center</div>
</div>

CSS:

.wrap {
  width: 100%;
  min-width: 940px;
}

.left {
  float: left;
  width: 200px;
}

.center { margin: 0 205px; }

.right {
  float: right;
  width: 200px;
}

JSBin Demo

Update: And here is the edited Fiddle

这篇关于如何使流体中心没有浮点数的3列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！