방문 페이지를 만들려고하고 있는데 지금은 각 상자에 자리 표시 자 이미지가 있지만 그 상자 사이에 공백을 추가하려고합니다. 생성 된 모든 상자 사이에 공백을 만들 수 있으며 응답 성을 부여 할 수 있습니까? 내 생각은 컨테이너를 만들고 여백과 패딩을 뒤죽박죽 처리하지만 모바일보기에서는 엉망으로 만듭니다. 사전에 도움의 모든이 격자의 모든 상자 사이에 등 간격을 추가하는 방법은 무엇입니까?
.twocolumn {
width: 100%;
background-size: cover;
display: inline-block;
position: relative;
}
.twocolumn2 {
width: 50%;
background-size: cover;
display: inline-block;
position: relative;
}
.onecolumn {
width: 25%;
display: inline-block;
position: relative;
}
.twocolumn h2 {
position: absolute;
bottom: 0;
padding: 20px 10px 10px 10px;
margin: 0;
font-family: passion one;
color: #FFF;
}
.twocolumn2 h2{
position: absolute;
bottom: 0;
padding: 20px 10px 10px 10px;
margin: 0;
font-family: passion One;
color: #FFF;
}
.onecolumn h2 {
position: absolute;
bottom: 0;
padding: 20px 10px 10px 10px;
margin: 0;
font-family: passion one;
color: #FFF;
font-size: 14px;
}
.left {
float: left;
}
.right {
float: right;
}
.columnimg {
width: 100%;
}
.header {
background: white;
margin: 50px;
text-align: center;
font-family: passion one;
font-size:5vw;
letter-spacing: 3vw;
}
<div class="clearfix">
<a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="twocolumn2 clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="twocolumn clearfix" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:400px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center top;">
<h2>TITLE HERE</h2>
</div></a>
<a href="#"><div class="onecolumn clearfix left" style="background-image:url(http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif); background-size:cover;height:200px;background-position:center;">
<h2>TITLE HERE</h2>
</div></a></div>
감사합니다.
나는 css-grid가 무엇인지 모릅니다. 예제로 설명 할 수 있습니까? – johnstont05
다음은 css-grid의 기능에 대한 문서입니다. https://css-tricks.com/snippets/css/complete-guide-grid/ 예를 들어 답을 완성 해 드리겠습니다. 달성하기 위해, 그러나 당신이 색깔이있는 배경 대신에 이미지를 사용했기 때문에 그것이 어떻게 보일 것인가를보기는 약간 어렵다. – SourceOverflow