3
我怎樣才能定位3像這樣的圖像與CSS？如何在兩個相同高度的列中放置3張圖像？
我試過多種方法，如inline-block來定位我的圖片類似上面的圖像，但一切都變了。我也嘗試通過互聯網尋找這類事情的教程，但找不到任何可以幫助我的東西。
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
html {
height: 100%;
box-sizing: border-box;
}
body {
width: 1500px;
text-align: center;
font-family: arial;
margin: 0 auto;
}
header ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding-bottom: 10px;
align-items: center;
border-bottom: 2px solid black;
font-family: 'Source Code Pro';
}
footer ul {
display: inline-block;
list-style-type: none;
align-items: center;
font-family: 'Source Code Pro';
}
.logo {
font-family: 'Source Code Pro';
font-size: 40px;
padding-top: 20px;
font-weight: lighter;
}
/* Website nav code */
#top-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
/* Shop nav code */
#bottom-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
margin-top: 50px;
padding-bottom: 10px;
align-items: center;
font-family: 'Crimson Text';
}
#bottom-nav ul {
list-style-type: none;
}
a {
color: inherit;
text-decoration: none;
}
#bottom-nav ul li {
display: inline-block;
padding: 15px 20px 0 20px;
}
nav ul {
list-style-type: none;
}
.info {
display: none;
color: #fff;
left : 0;
top : 45%;
right : 0;
text-align : center;
position: absolute;
}
/* Images code */
/* Footer code */
#footer {
background: black;
text-align: center;
color: white;
\t \t width:100%;
\t \t float:left;
\t }
.wrap {
\t \t position:relative;
\t \t margin:0 auto;
\t \t width:900px;
height: 200px;
\t }
.wrap ul {
list-style-type: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Gullible</title>
<link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
<link href="normalize.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>
</head>
<body>
<header>
<nav id="top-nav">
<h1 class="logo"><a href="index.html">Gullible</a></h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="visit.html">Visit</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<nav id="bottom-nav">
<ul>
<li><a href="shop.html">Men</a></li>
<li><a href="women.html">Women</a></li>
<li><a href="denim.html">Denim</a></li>
<li><a href="suits.html">Suits</a></li>
<li><a href="dresses.html">Dresses</a></li>
<li><a href="accessories.html">Accessories</a></li>
</ul>
</nav>
<div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
<div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
</div>
<div id="" class="pic"><img src=""/>
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div id="footer">
<div class="wrap"><strong>FIND US ON</strong>
<ul>
<li><a href="">Twitter</a></li>
<li><a href="">Facebook</a></li>
<li><a href="">Pintrest</a></li>
<li><a href="">Instagram</a></li>
</ul>
</div>
<div class="wrap"><strong>NAVIGATION</strong>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Visit</a></li>
<li><a href="">Newsletter</a></li>
</ul>
</div>
</div>
</body>
</html>
你看過Bootstrap嗎？ – Hideous1
是的，但我被告知不使用bootstrap，直到我開發出一個良好的CSS的理解，以避免依賴它。 – LCAD
儘管你的凹痕，你似乎有jacket1和連帽衫嵌套在夾克裏面。這是故意的嗎？ – Nate