我正在尝试创建一个 div，其中包含一个文本框，其中包含 3 列，文本和图像位于它们下方。就像我附上的第一张图片一样。包括分隔的线，如果可能的话，还包括小问号!
目前这是我在图 2 中的位置，
我附上了一个 JSFiddle 文件，但它不包含图像，因为它们不在线:
https://jsfiddle.net/5xzg78je/
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="box">
<img src="iphone.png">
<div class="row">
<div class="column">How many would you like to insure <img src="10.png" class="textimage">
<br> Total value when new <img src="10000.png" class="textimage"><br> Would you like instant replacement <img src="replacement.png" class="textimage">
</div>
</div>
</div>
</div>
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height: 40px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
最佳答案
尝试下面的一个。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<style>
.box p i {position: absolute;padding-left: 5px;}
.box img {margin:0 auto;}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 text-center">
<div class="box">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h4>How many would you like to insure </h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<h4>Total value when new</h4>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
<p>Would you like instant replacement <i class="fa fa-question-circle"></i></p>
<img src="http://www.mulierchile.com/button/button-007.jpg" width="250" class="img-responsive">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>关于HTML 创建包含图像和文本的 3 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48070308/