0

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

2 回答 2

0

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

于 2013-09-25T14:09:45.510 回答
0

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

于 2013-09-26T09:45:32.957 回答