HTML / CSS布局问题
[英]HTML/CSS layout issue
问题描述
我必须制作一个具有响应式设计的页面，它对我来说并不适用。
这就是布局的样子（黑色块将是图像）：
问题在于使其具有响应性。 在较小的屏幕上，布局的形状应该相同，但无论屏幕大小如何，都必须适合屏幕。 在宽屏幕上，这就是布局：
我已经尝试了几件事，但问题一直在发生，这不是因为一行CSS或任何东西，但我只是不明白如何解决这个问题的核心。
有人可以用小提琴来解决这个问题吗？
好的，所以我在这里取得了进展。 问题是边缘。 所有的块应该彼此相距5px。 当我这样做时，它会出错。 现在，我拥有所有大小合适的块，但我只需将它们分开5px。
HTML：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="wrapper">
<a href="#" class="link">
<img class="mainImg" src="http://www.calvijn.nl/media/3529/IMG- 20130925-WA0001_500x500.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
</div>
</body>
</html>
CSS：
#wrapper {
position: absolute;
left: 5%;
right: 5%;
top: 100px;
width: 90%;
height: auto;
background: red;
}
.mainImg {
display: inline-block;
float: left;
width: 33%;
}
.subImg {
display: inline-block;
float: left;
width: 33%;
}
这是一个小提琴： 小提琴
那么，我怎么能把块拉开呢？
提前致谢！
2 个解决方案
解决方案1
1 2014-01-23 18:21:20
解决方案2
1 已采纳 2014-01-23 18:53:54
看这个小提琴 /观看全屏
HTML
<div id="container">
<div class="inner">
<div></div>
</div>
<div class="inner">
<div></div>
<div></div><br/>
<div></div>
<div></div>
</div>
</div>
CSS
html,body,#container{
width:100%;
height:100%;
margin:0 auto;
padding:0 auto;
white-space:nowrap;
font-size:0px;
}
.inner{
display:inline-block;
height:100%;
white-space:nowrap;
}
.inner:nth-child(1){
width:30%;
vertical-align:top;
margin-right:5px;
}
.inner:nth-child(2){
width:70%;
}
.inner div{
display:inline-block;
border-left:3px solid white;
border-top:3px solid white;
background-color:black;
}
.inner:nth-child(1) div{
width:100%;
height:100%;
padding-top:3px;
}
.inner:nth-child(2) div{
width:50%;
height:50%;
}
新小提琴
HTML / CSS布局问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.