我必须制作一个具有响应式设计的页面，但它对我来说并不奏效。
布局应该是这样的(黑色 block 将是图像):
问题是让它响应。在较小的屏幕上，布局的形状应该相同，但无论屏幕大小如何，都必须适合屏幕。在宽屏幕上，布局变成了这样:
我已经尝试了几种方法，但问题不断出现，这不是因为一行 CSS 或任何东西，而是我不明白如何解决这个问题的核心。
任何人都可以用黑盒子制作 fiddle 来解决这个问题吗？
好的，现在我有了进展。问题是边距。所有 block 之间的距离应为 5px。当我这样做时，它出错了。现在，我有了所有大小合适的 block ，但我只需要将它们分开 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%;
}
这是一个 fiddle : Fiddle
那么，我怎样才能把积木拆开呢？
提前致谢!
最佳答案
See this fiddle/观看 Fullscreen
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%;
}
New Fiddle
关于HTML/CSS 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21316075/