0
このギャラリーで働くなぜ私はギャラリーの内側の右側に余分なスペースを追加しているのか分かりません。青色の枠線は、ギャラリーウィンドウを表示するためだけにあり、最終的に削除されます。これはギャラリーCSSのすべてです。ギャラリー内にランダムなスペースが追加されています。それは詰め物ではない？
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
フィドル：https://jsfiddle.net/3crrxdax/5/ありがとう。
* {
box-sizing: border-box;
font-family: Georgia, Arial, sans-serif;
}
html {
background-color: #FFFF20;
}
body {
background-color: #FFFF20;
height: 100%;
}
#wrapper {
width: 1500px;
height: 100%;
margin: auto;
background-color: #233237;
color: #FFFF20;
box-shadow: 5px 5px 5px #000000;
}
header {
color: #FFFF20;
font: Georgia, serif;
text-align: center;
}
h1 {
background-image: url(ebaylogo.png);
background-repeat: no-repeat;
background-position: right;
height: 72px;
background-size: 120px;
line-height: 200%;
margin-bottom: 0;
}
h3 {
text-align: center;
padding-top: 50px;
padding-bottom: 5px;
}
h3,
.smallp {
margin: 0;
}
nav {
text-align: center;
font-weight: bold;
}
nav a {
text-decoration: none;
color: #FFFF20;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 30px;
padding: 2px;
border: 2px solid #FFFF20;
}
footer {
padding-top: 50px;
font-size: .70em;
font-style: italic;
text-align: center;
color: #FFFF20;
margin: auto;
text-align: center;
}
footer a {
color: #FFFF20;
}
main {
padding: 0px 20px 0px 20px;
display: block;
}
.unorderedlist {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-pack: justify;
border: 1px blue solid;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
padding-left: 0px;
list-style-type: none;
margin: 100px auto;
width: 60%;
height: 100%;
text-align: center;
}
.list {
padding-bottom: 50px;
background-color: #18121E;
width: 220px;
height: 375px;
box-shadow: 5px 5px 5px;
margin-bottom: 25px;
}
.list a {
text-decoration: none;
color: #FFFF20;
}
.smallp {
color: #FFFF20;
width: 300px;
}
.smallp2 {
width: 300px;
}
.secondh3 {
text-align: center;
margin-bottom: -15px;
}
.pawnstarimg {
margin-top: 50px;
border: 2px solid #FFFF20;
}
.peaceimg {
border: 2px solid #FFFF20;
order: 4;
-ms-flex-order: 4;
}
.malebox a {
color: #FFFF20;
}
.femalebox a {
color: #FFFF20;
}
a:hover {
color: #0000FF;
}
/** a:visited{
\t color:#000000;
Able to check a:hover without clearing cache
}**/
a:active {
color: #00FF00;
}
.test {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
width: 60%;
margin: auto;
justify-content: space-around;
-ms-flex-pack: justify;
}
.testbox2 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.testbox3 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
.gallery>div {
padding: 5px;
}
.gallery>div>img {
display: block;
transition: .3s transform;
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(2.5, 2.5);
transition: .2s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}<main id="wrapper">
<header>
<h1>CDC Shop</h1>
</header>
<nav>
<ul>
<li> <a href="../index.html">Home</a></li>
<li> <a href="../shirts/shirts.html">Shirts</a></li>
<li> <a href="../pants/pants.html">Pants</a></li>
<li> <a href="../pants/pants.html">Jackets</a></li>
<li> <a href="../pants/pants.html">Shoes</a></li>
<li> <a href="../pants/pants.html">Contact</a></li>
</ul>
</nav>
<div class="gallery">
<div>
<a href="angels.gif"><img src="angels.gif" height="150px" width="75px" />
</div>
<div>
<a href="angels2.jpg"><img src="angels2.jpg" height="150px" width="75px" />
</div>
</div>
<footer>
Copyright © 2017 CDCShop <br>
<a href="[email protected]">[email protected]</a>
</footer>
</main>
あなたは1のためのあなたのリンクに欠けているよく見にそれを作るために。あなたのフィドルからスニペットを作成すると、投稿したものよりも多くのCSSが表示されます – mplungjan