右侧的 4 张图像作为侧边栏答案

【问题标题】：4 images on the right as sidebar右侧的 4 张图像作为侧边栏
【发布时间】：2013-09-25 12:48:07
【问题描述】：

我想创建一个流畅的设计，带有标题（完整）、左侧的大图片幻灯片和 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>

【问题讨论】：

请做一个jsfiddle
这是小提琴：jsfiddle.net/jmJba/1

标签： html css image multiple-columns sidebar

【解决方案1】：

使用 bootstrap 2 或 3 使流畅且响应迅速的网站变得简单易用，一旦掌握了它，您几乎可以使用 bootstrap 做任何事情，您可以轻松地将它们分成单独的网格，按照您喜欢的方式进行操作。

【讨论】：

谢谢。 Bootstrap 看起来很棒，我真的很想了解它。但就目前而言，不应该有一个简单的解决方法来完成这项工作吗？

【解决方案2】：

CSS-Tricks 是一个开始更多用户朋友论坛的好地方，也可以在那里搜索发布您的消息，还可以显示代码示例您试图实现的目标

【讨论】：

我在那里搜索过，但找不到。我现在可以在所有浏览器中使用它，除了 FF。图像一直漂浮在中间的某个地方，并且不会粘在右侧。与清除有关吗？有什么想法吗？