如何使用 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;
width:100%;
float:left;
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
height: 200px;
}
.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>最佳答案
使用 CSS flexbox .
非常简单，使用嵌套的 flex 容器。
.outer-flex-container {
display: flex;
}
.inner-flex-container {
display: flex;
flex-direction: column;
margin-left: 5px;
}<div class="outer-flex-container">
<div class="image">
<img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
</div>
<div class="inner-flex-container">
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
</div>
</div><!-- END .inner-flex-container -->
</div><!-- END .outer-flex-container -->flexbox 的优势:
- 最少的代码；非常有效率
- centering, both vertically and horizontally, is simple and easy
- equal height columns are simple and easy
- multiple options for aligning flex elements
- react 灵敏
- 与 float 和表格不同，它们提供有限的布局能力，因为它们从未用于构建布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。
注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请使用 Autoprefixer . this answer 中的更多浏览器兼容性详细信息.
关于html - 如何在两个等高的列中放置 3 个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35761060/