Question

我正在尝试创建一个div，其中包含一个带有3列的文本框，其下方有文本和图像。就像我附上的第一张图片一样。包括划分的线条，如果可能的话还包括小问号！目前，这就是我在图像2中的位置，

我附上了一个JS小提琴文件，但它不包含图像，因为它们不在线呵呵，

       <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;

}

任何帮助将不胜感激！

谢谢！

Answer 1

尝试下面一个。

<!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>

Answer 2

我知道这篇文章很旧，但这是一个更好的解决方案。

HTML：

<table>
    <tr class="v-line">
        //Content
    </tr>
    <tr class="v-line">
        //Content
    </tr>
    <tr>
        //Content
    </tr>
</table>

CSS：

.v-line {
  padding-right: 2em;
  border-right: 1px solid rgb(185, 185, 185);
}

v线类有点脏，但这是简单且基本的HTML代码。

HTML使用图像和文本创建3列

2 个答案: