如何在两个等高的列中放置 3 个图像？
Posted
技术标签:
【中文标题】如何在两个等高的列中放置 3 个图像？【英文标题】：How to position 3 images in two equal height columns? 【发布时间】：2016-06-16 02:56:54 【问题描述】：如何使用 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>【问题讨论】：
你看过 Bootstrap 吗？ 是的，但是我被告知在我对 css 有很好的理解之前不要使用引导程序以避免依赖它。 尽管有缩进，但您似乎将夹克 1 和连帽衫嵌套在夹克内。这是故意的吗？ 我没有注意到，对此感到抱歉。 【参考方案1】：使用 CSS flexbox。
非常简单，使用嵌套的弹性容器。
.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" >
</div>
<div class="inner-flex-container">
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" >
</div>
<div class="image">
<img src="http://dummyimage.com/150x100/cccccc/fff" >
</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
反应灵敏
与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。
请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。更多浏览器兼容性详情请见this answer。
【讨论】：
【参考方案2】：检查下面的代码，希望对你有帮助。注意样式是内联的，你可以把它放在你想要的任何地方。最好的地方是在外部 CSS 文件中，但这也是你的愿望：-
<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">
<div class="overlay" style="float:left;width:30%;">
Left Hand Side Pic
<img src=""/></div>
<div id="right-side" style="float:left;width:70%;">
<div id="RightPicAbove" class="info" style="background:red;">
Left Hand Side Above Pic
</div>
<div id="RightPicBelow" class="info" style="background:green;">
Rigth Hand Side Below Pic
</div>
</div>
</body>
</html>
【讨论】：
感谢有关如何定位图像的颜色编码指南。 我很高兴能帮助你@LCAD【参考方案3】：试试这个
<div id="jacket" class="pics">
<div class="imgcont">
<img src="http://i.imgur.com/47iFqA1.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</div>
<div class="imgcont">
<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/YJMNEtS.jpg" />
<div class="overlay"></div>
<div class="info">
<p class="text"></p>
</div>
</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>
和css
@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;
.imgcont
display: inline-block;
【讨论】：
你应该解释你的代码。仅代码答案鼓励复制和粘贴，而不会强化您试图帮助解释的原则。 嗯，我的一种方法包括将 2 个较小的图像与 div 标签分组，将大图像分开，然后在大图像中添加一个 inline-block 元素。该方法最终将其中一张小图像放在大图像的一侧，但第二张小图像最终位于大图像的顶部。 我看到您的代码根本没有包含任何 CSS，而是更改了 div 的位置以创建布局。我打算看看并插手看看结果是如何发生的。 @catch22 注意！感谢您的建议，这很有意义。 LCAD 我添加了两个 .imgcont 类的容器 div。将大图像放在左侧 .imgcont div 中，将两个小图像放在右侧 .imgcont div 中。我在 .imgcont 上使用了内联块 css 属性，将它们并排放置。你也可以使用 float:left （这需要 clearfix）。【参考方案4】：我认为您想要使用的称为浮点数。如果您将#hoodie 图片向左浮动，然后将您的#jacket 图片放在包含的 div 中（为简单起见，我们将其称为 .jackets），然后将其浮动到右侧，您应该会获得所需的效果。见我的jsfiddle。
顺便说一句，您的#jacket 元素上缺少一个封闭的 div 标记。
.jackets
float: right;
#hoodie
float: left;
width: 50%;
#jacket
float: right;
#jacket1
float: right;
clear: both;
【讨论】：
以上是关于如何在两个等高的列中放置 3 个图像？的主要内容，如果未能解决你的问题，请参考以下文章
在 WKInterfaceTable 行中放置一个图像和两个标签