Question

我刚刚创建了这个很棒的画廊并实现了它但有一个问题。是否可以将其全宽放在窗口的两侧并且图像之间没有空间？我相信这是我需要改变的CSS。

#content {
   /*width: 980px;*/
   /*width: 95%;*/
   width: auto;
   margin: 0 auto;
   margin-top: 50px;
}

.item {
   display: block;
   float: left;
   width: 300px;
   margin: 0 20px 20px 0;
   -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
   -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
   -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
   -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
   transition: left .4s ease-in-out, top .4s ease-in-out .4s;
} 

.featured {
   width: 620px;
}

.item img {
   width: 300px;
   height: auto;
}

.featured img {
   width: 620px;
   height: auto;
}

这是HTML部分

<body>
<div id="content" class="container clearfix">

<div class="item">
  <img src="img/single-1.jpg" alt="" />
</div>

<div class="item">
  <img src="img/single-2.jpg" alt="" />
</div>

<div class="item featured">
  <img src="img/double-1.jpg" alt="" />
</div>
</div>
</body>

JSFIDDLE of what is look like now

Answer 1

更改你的CSS：

#content {
 /*width: 980px;*/
 /*width: 95%;*/
 width: 100%; /* <-- change to 100% */
 margin: 0 auto;
 margin-top: 50px;
}

.item {
 display: block;
 float: left;
 width: 300px;
 /*margin: 0 20px 20px 0;*/ /* comment out or remove this line */
 -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
 -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
 -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
 -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
 transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}

添加边距/空白/间隙

全宽画廊与砌体

1 个答案: