Question

我已经在网上进行了一些搜索，但我无法在任何地方找到解决方案。

有人知道响应下面实现布局的最佳方法吗？

HTML：

<div class="simple-gallery">
    <div class="simple-gallery--preview">
        <img src="http://placehold.it/657x400"/>
    </div>
    <div class="simple-gallery--thumbs">
        <ul>
            <li>
                <img src="http://placehold.it/657x400"/>
            </li>
            <li>
                <img src="http://placehold.it/657x400"/>
            </li>
            <li>
                <img src="http://placehold.it/657x400"/>
            </li>
        </ul>
    </div>
</div>

我已经尝试了很多不同的方法来通过CSS实现这一点，包括使用Bourbon的Neat让我最接近，但是从图形上看它并没有“感觉”＃34;很干净。

Answer 1

感谢大家的帮助。我想我可能提出这个问题有点不对劲。通过响应我意味着它将允许所有四个图像按比例缩放（只是在那里学到了比例和比例之间的差异）。

继承我满足要求的尝试

＆＃13;

/* quick and dirty reset */

* {
  margin: 0;
  padding: 0;
}
/* center element*/

body {
  width: 960px;
  margin: 0 auto;
}
/* actual code */

.simple-gallery {
  width: 60%;
}
.simple-gallery img {
  width: 100%;
}
.simple-gallery ul {
  list-style-type: none;
  line-height: 0;
}
.simple-gallery .simple-gallery--preview {
  width: 74%;
  float: left;
  margin-right: 2%;
}
.simple-gallery .simple-gallery--thumbs {
  width: 22.2%;
  float: left;
}
.simple-gallery .simple-gallery--thumbs ul li {
  margin-bottom: 10%;
}

＆＃13;

<div class="simple-gallery">
  <div class="simple-gallery--preview">
    <img src="http://placehold.it/657x400" />
  </div>
  <div class="simple-gallery--thumbs">
    <ul>
      <li>
        <img src="http://placehold.it/657x400" />
      </li>
      <li>
        <img src="http://placehold.it/657x400" />
      </li>
      <li>
        <img src="http://placehold.it/657x400" />
      </li>
    </ul>
  </div>

＆＃13;

http://codepen.io/anon/pen/YPZjdE

测试我的意思是改变身体的宽度或.simple-gallery，一切都应该保持它们的比例。

我确定它可以改进，即使它只是改编它以使用整数。

再次感谢所有回复的人，我非常有兴趣看到一种更好的做法，我知道这种做法。

Answer 2

我确信有更好的方法可以做到，但你可以选择这个

.conjoined-input input[type="text"] {
    min-width:80%;
}

.conjoined-input input[type="button"] {
    float: right;
    width:19%
}

Answer 3

在这种情况下，这取决于“响应”的含义。人们希望缩略图在下面，其他人只想调整预览的大小。

在所有情况下，您都应该调查媒体查询。根据各种条件，操纵元素是非常灵活的方法。

我见过的最简单的介绍是youtube上的简短视频：https://www.youtube.com/watch?v=fA1NW-T1QXc 我还发现这个备忘单很有用：http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/ 既然您使用了波本威士忌，您还可以阅读sass中的MQ：http://css-tricks.com/approaches-media-queries-sass/

学习媒体查询的另一种方法（最好的IMO）是查看框架（例如bootstrap和foundation）并复制他们的解决方案。它们非常灵活并且受到社区的测试。

PS。 Ouh和我忘了再提一个方法：只使用一些响应式网格框架。您可以自定义自己的bootstrap，foundation，grid960等版本。以满足您的需求。

Answer 4

试试这个：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style>
.simple-gallery{
    position: relative;
    z-index: 1;
}
.simple-gallery--preview{
    width: 472px;
    float: left;
    min-height: 1px;
    margin-left: 20px;
}
.simple-gallery--thumbs{
    width: 380px;
    float: left;
    min-height: 1px;
    margin-left: 20px;
}
.simple-gallery--thumbs>div{
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin-top: 9px;
}
.simple-gallery--thumbs>div:first-child{
    margin-top: 0;
}

 @media only screen and (max-width: 480px) {
    .simple-gallery--thumbs>div:first-child{
        margin-top: 9px;
    }
    .simple-gallery--thumbs>div>img{
        width: 100%;
    }

    .simple-gallery--preview{
        width: 100%;
    }
    .simple-gallery--thumbs{
        width: 100%;
}
 }
</style>
</head>

<body>                            
<div class="simple-gallery">
                <div class="simple-gallery--preview">
                    <img src="http://placehold.it/540x417"/>
                </div>
                <div class="simple-gallery--thumbs">
                    <div><img src="http://placehold.it/380x133"/></div>
                    <div><img src="http://placehold.it/380x133"/></div>
                    <div><img src="http://placehold.it/380x133"/></div>
                </div>
            </div>                                    
</body>
</html>

Answer 5

请尝试这样的事情......

<div id="space">
    <div id="large"></div> 
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
</div>

DEMO

我认为这可以为您提供所需的结构。

HTML CSS布局左侧有1个大图像，右侧有3个小图像（响应）

5 个答案: