0

我在制作 3 列布局时遇到问题。我现在已经在网上尝试了所有的例子——使用谷歌。这些似乎都不能解决我的问题。

我尝试做的事情对有知识的人来说很容易。

  1. 制作覆盖整个屏幕的 3 列流体布局。
  2. 左列应为 230px 宽度，固定，高度 100%。
  3. 中心列和右列应等宽。
  4. 对于中心和右列，它们必须“浮动”到彼此

缩小时会出现问题。中柱向左跑，在中柱和右柱之间形成一个巨大的白色间隙。

那是我的问题。

中心和右列需要彼此靠近 - 没有间隙。

我该如何解决这个问题？

你可以在这里看到我的尝试：Fiddle

只需缩小，您就可以立即看到问题。需要帮助来解决这个问题。如何？

如果我在中心列内使用宽度设置为 100% 的 div 包装器，则会出现另一个问题。将发生与上述相同的问题。左右列中的文本也需要浮动。

我不能使用overflow:hidden，因为我需要 - 稍后 - 使用中心列右侧的绝对 div 来设置指向右列的图像箭头。

4

2 回答 2

0

你的意思更像是这样的：http: //jsfiddle.net/gbRzM/？（使用 left、right 和 width 属性来定位所有内容）

.left {
    width: 230px;
position:fixed;
    background:GREEN;
}

.right {
    right:0;
    width:30%;
    position:fixed;
    background: RED;
}

.center {
    left:230px;
    right:30%;
    position:fixed;
    border:1px solid;
    background:YELLOW;
}

或者更准确地说：http: //jsfiddle.net/HKJvP/？（将 center 和 right 放在一个新的 div 中，以便像素和 % 可以混合，允许您指定的相同宽度）

.left {
    width: 230px;
    position:fixed;
    background:GREEN;
}

.notleft{
    left:230px;
    height:100%;
    right:0;
    position:fixed;
}

.right {
    right:0;
    width:50%;
    position:absolute;
    background: RED;
}

.center {
    left:0;
    width:50%;
    position:absolute;
    border:1px solid;
    background:YELLOW;
}
于 2013-03-09T04:14:45.773 回答
0

给三列的父元素一个固定的宽度并添加类 clearfix

``

.clearfix:after {     
    content: ".";    
    display: block;    
    clear: both;  
    visibility: hidden;  
    line-height: 0;   
    height: 0;   
}   

.clearfix {   
    display: inline-block;  
}   

html[xmlns] .clearfix {    
    display: block;    
}    

* html .clearfix {     
    height: 1%;      
}
于 2013-03-09T19:29:01.330 回答