如何在两个相等高度的列中放置3个图像? [英] How to position 3 images in two equal height columns?
本文介绍了如何在两个相等高度的列中放置3个图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何用CSS放置3张这样的图像?
How can I position 3 images like this with CSS?
我尝试了多种方法，例如inline-block，将我的图像放置在上面的图像上，但是都出错了.我还尝试通过互联网查找有关此类问题的教程，但找不到任何可以帮助我的东西.
I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.
@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>
推荐答案
Use CSS flexbox.
非常简单，使用嵌套的flex容器.
Very simple, using a nested flex container.
.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的优点:
- 最小代码；非常有效
- 垂直和水平居中既简单又容易
- 等高列简单易行
- 用于对齐弹性元素的多个选项
- 反应灵敏
- 与花车和桌子不同，由于它们从来没有用于建筑布局，而花车和桌子的布局能力有限，因此flexbox是一种现代(CSS3)技术，具有多种选择.
- minimal code; very efficient
- centering, both vertically and horizontally, is simple and easy
- equal height columns are simple and easy
- multiple options for aligning flex elements
- it's responsive
- unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
请注意，除IE 8和IE 8以外，所有主流浏览器均支持flexbox， 9 .某些最新的浏览器版本(例如Safari 8和IE10)需要供应商前缀.要快速添加所需的所有前缀，请使用 Autoprefixer . 此答案中的更多浏览器兼容性详细信息.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
这篇关于如何在两个相等高度的列中放置3个图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
