css在固定元素旁边浮动

我需要一些CSS帮助。css在固定元素旁边浮动

我想创建这样的结构：

我想创建一个菜单，中心固定，用宽960px; - 这很简单..

在菜单的同一行上，我想创建两个div：一个从显示器的左边框到midle居中div的最近距离，另一个来自下一个居中，直到显示器的右边界。

我会尝试用密钥来描述你。

右侧和左侧的div将是流动的，并将取决于屏幕分辨率。

任何人都可以帮到我吗？

谢谢。

来源

2012-07-18 Sorin Vladu

你做了什么所以fa R' – 2012-07-18 23:05:30

您可以使用CSS这样

#fixed{ 
    margin:0 px auto; 
    width: 960px; 
}  
#container { 
    padding-left: 205px;  /* LC fullwidth */ 
    padding-right: 205px;  /* RC fullwidth + CC padding */ 
    background:#FFFF99; 
} 

#container .column { 
    position: relative; 
     float: left; 
    } 

    #center { 
     padding: 20px 0px 20px 0px;  /* CC padding */ 
     width: 100%; 
     height:auto; 
    } 
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;} 

    #right{ 
     width: 205px;    /* RC width */ 
     padding: 0px;   /* RC padding */ 
     margin-right: -100%; 
    } 
#left{ 
width : 205px; 
padding: 0px 
margin-left:-100%; 

}

和HTML像

<div id="fixed"> 
<div id="container"> 
<div id="center" class="column"></div> 
<div id="left" class="column"></div> 
<div id="right" class="column"></div> 
</div> 
</div>

来源

2012-07-19 03:20:39

它不适用于我：http://jsfiddle.net/EAN6N/ – biziclop 2012-07-19 05:30:31

绝对不行。这就像 | ------- center ------ | | --left-- || --right-- | – MaVRoSCy 2012-07-19 05:40:19

我敢肯定，你可以得到你想要使用这个东西：

The Holy Grail 3 column liquid layout

只需添加：

#col1 { margin: 0 auto; width: 960px; }

您可能需要额外的tinkerage。

来源

2012-07-18 23:55:30 wanovak

这不是OP要求的。 OP想要一个固定居中的div，并且侧面的div大小应该是auto。这完全相反（固定边divs和自动中心div）。 – MaVRoSCy 2012-07-19 05:36:20

一些失败的想法：http://jsfiddle.net/kC35U/，http://jsfiddle.net/kC35U/1/

最终的解决方案：

http://jsfiddle.net/kC35U/4/

HTML与额外的标记：

<div id="bar"> 
    <div class="left"><div>LEFT</div></div> 
    <div class="right"><div>RIGHT</div></div> 
    <div class="center">CENTER</div> 
</div> 
<div> 
    Footer 
</div>

CSS：

中心DIV，固定无线dth，居中，没有什么特别的：

.center { 
    width: 500px; 
    margin: 0 auto; 
}

现在，制作两个50％宽的包装divs左/右侧。他们的高度设置为0，以保持所有三个div的顶部对齐很好：

.left { 
    width: 50%; 
    margin-right: auto; 
    height: 0; 
} 

.right { 
    width: 50%; 
    margin-left: auto; 
    height: 0; 
}

内部的div填补他们的父母，但我们切断中心div的一半宽度。

.left > div { 
    margin-right: 250px; 
} 

.right > div { 
    margin-left: 250px; 
}

如果你想要把东西三列的下方，那么你必须要使用一些怪异的招数：

.left:after, .right:after { 
    content: ''; 
    float: left; 
    height: 0; 
} 

#bar + * { 
    clear: both; 
}

来源

2012-07-19 00:08:35 biziclop

yeap，作品+1！ – MaVRoSCy 2012-07-19 05:55:14

css在固定元素旁边浮动

回答

相关问题