1
我正在使用CSS砌體排列的一組8個圖像的網站的一部分。它看起來如何我想要的寬度的例外 - 我想圖像伸出屏幕。 我檢查了控制檯，似乎有一個爲.wrapper容器設置的邊距，但我似乎無法刪除它。我想要的一切都是一樣的 - RWD也按我的意願設置。 下面的代碼 -CSS - 砌體圖像在屏幕上伸展
.brick h2 {
position: absolute;
top: 50%;
left: 45%;
margin: 0 20px 0 20px;
color: white;
text-align: center;
transform: translate(-50%, -50%);
font-size: 25px;
}
/* Partners page */
.masonry { /* Masonry container */
column-count: 4;
}
.brick img {
\t width: 100%;
\t height: 100%;
}
body {
font-family: 'Gotham-Light';
margin: 0;
background: #fff;
}
.wrapper {
width: auto;
margin: 3em auto;
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
vertical-align: bottom;
}
.brick {
display: inline-block;
margin: 0 0 1em;
width: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Image words/text hover effect */
.brick {
opacity: .99;
position: relative;
}
.brick:before {
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
opacity: 0;
z-index: 2;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.brick img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.brick .details {
/* font-size: 10px; */
padding: 0px 20px 20px 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}
.brick .details span {
/* display: block; */
opacity: 0;
top: 100px;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.brick .details #title {
line-height: 1.5;
font-weight: 500;
font-size: 18px;
}
.brick .details #info {
line-height: 1.2;
font-weight: 500;
font-size: 10px;
}
.brick:focus:before,
.brick:focus span, .brick:hover:before,
.brick:hover span {
opacity: 1;
}
.brick:focus:before, .brick:hover:before {
top: 50%;
}
.brick:focus span, .brick:hover span {
top: 0;
}
.brick:focus #title, .brick:hover #title {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.brick:focus #info, .brick:hover #info {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
/* ------------------------- */
/* RWD for masonry partner templates */
@media only screen and (min-width: 320px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 400px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
@media only screen and (min-width: 1280px) {
.wrapper {
width: 1260px;
}
}<body>
<div class="wrapper">
<h1><span style="color: rgb(133,52,146);">+</span>What we do</h1>
<div class="masonry">
<div class="brick">
<h2>ADVERTISING</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>GRAPHIC DESIGN</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>BRAND IDENTITY</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>BRAND GUIDELINES</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>PRINT MANAGEMENT</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>CREATIVE DIRECTION</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>EDITORIAL DESIGN</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
<div class="brick">
<h2>AND LOTS OF OTHER STUFF</h2>
<img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
<div class="details">
<span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
</div>
</div>
</div>
</div>
</body>在我的屏幕上它看起來像這樣（不知道爲什麼圖像的形狀不是在片段形成）。然而，我主要關注的是獲取圖像，目前還比他們在屏幕上伸展 -
任何援助將不勝感激。
的可能的複製[CSS列錯誤 - 5列計數僅示出圖4（與圖像）]（https://stackoverflow.com/questions/9302755/css-columns-bug- 5列只顯示4個圖像） – sol