右侧4个图像作为边栏

我想创建一个带有标题（全部带）的流体设计，左侧有大图像幻灯片，侧边栏有4个图像。右侧4个图像作为边栏

我想使边栏100％的高度，与4个图像（这将作为按钮）。高度应该始终为100％，所以不要滚动。调整浏览器大小时宽度应自动更改。

但我无法完成它。你有什么建议吗？

非常感谢您！

<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/> 
<style type="text/css"> 
body { 
background-color: #fff; 
padding: 0; 
margin: 0; 
font-family: "Droid Sans", sans-serif; 
width: 100%; 

} 
div#links { 
    float: left; 


} 

div#rechts { 
    float: right; 
    display: block; 
    height: 90%; 
    background-color: grey; 

} 

div#rechts img { 
    height: 25%; 
    width: auto; 
    clear: both; 
} 

div#cat { 
    float: right; 
    clear: both; 
} 


header { 
    height:10%; 
    font-size: large; 
    text-align: center; 
} 

</style> 
</head> 
<body> 
<div id="container"> 
<header id="header">header</header> 

<div id="links"> 
    Content left side 
</div> 
<div id="rechts"> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
<div id="cat"><img src="http://blog.erikmeijs.we-ict.nl/wp-content/uploads/2013/09/meeuw-1024x682.jpg" /></div> 
</div> 
</div> 
</body> 
</html>

来源

2013-09-25 Pieter

请作的jsfiddle – MCSI

这是捣鼓什么：HTTP： //jsfiddle.net/jmJba/1/ – Pieter

使用引导2或3用于制作流畅性和响应网站简单易用，一旦得到开窍了，你几乎可以做自举什么，你可以很容易的div他们以不同的网格，以你的方式想。

来源

2013-09-25 14:09:45 user2814461

谢谢。引导似乎很棒，我真的想进入。但现在，不应该有一个简单的解决方案，使这项工作？ – Pieter

CSS-技巧是一个伟大的地方开始更多的用户朋友论坛也可以搜索在那里发表您的消息，但也表明代码示例你努力实现

来源

2013-09-26 09:45:32 user2814461

我在那里搜索过，但找不到它。我已经在所有的浏览器上工作了，除了FF。图像在中间的某个位置保持浮动，不会粘在右侧。有些事情要做清楚或什么？任何想法？ – Pieter

右侧4个图像作为边栏

回答

相关问题