如何将3张图像放在两个相等高度的列中？
如何使用CSS定位3张这样的图像？
我尝试了多种方法，例如inline-block来定位我的图像，如上图所示，但一切都出错了。我也尝试通过互联网查找有关此类事情的教程，但无法找到任何可以帮助我的内容。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
@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>
4 个答案:
答案 0 :(得分：3)
使用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
- 响应
- 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。
请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多浏览器兼容性详细信息。
答案 1 :(得分：1)
检查下面的代码，希望它有所帮助..注意样式是内联的，你可以把它放在任何你想要的地方。最好的地方是外部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>
答案 2 :(得分：1)
我认为你想要使用的是浮动。如果你将你的#hoodie图片浮动到左边，然后将你的#jacket图片放在一个包含div中（为了简单起见，我们称之为.jackets），然后向右浮动，你应该得到想要的效果。查看我的jsfiddle。
顺便说一句，你在#jacket元素上缺少一个封闭的div标签。
.jackets {
float: right;
}
#hoodie {
float: left;
width: 50%;
}
#jacket {
float: right;
}
#jacket1 {
float: right;
clear: both;
}
答案 3 :(得分：1)
试试这个
<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;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？