每行三列HTML

时间：2016-01-05 09:18:18

标签： html css

我正在尝试创建这样的东西：

enter image description here

我想知道我是如何制作这样的拇指的。请注意，我正在使用WP而我没有使用Bootstrap。那么我怎样才能纠正我的代码，使其看起来与上图完全相同，并且必须具有响应性。

这是代码：

<h3>Includes the following:</h3>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

<div style="width: 35%;">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png" width="300">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</div>

JSFIDDLE：https://jsfiddle.net/p8gkjszg/ 任何的想法？谢谢！

6 个答案:

答案 0 :(得分：0)

ul li {
    display: inline-flex;
    margin-left: 20px;
    width: 150px;
    margin-bottom: 50px;
}
ul li img {
    width: 100%;
    height: 150px;
}
h4 {
    position: relative;
    top: 135px;
    right: 130px;
    font-size: 12px;
}
ul li a {
    position: relative;
    top: 162px;
    right: 125px;
}
<h3>Includes the following:</h3>

<ul><li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
</ul>

<ul>
<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>

<li>
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>
</li>
  </ul>

答案 1 :(得分：0)

你需要让你的div占总宽度的三分之一，以便浮动三行，如下所示：

<div style="width:33.33333%; float: left;">
</div>

要在内容之间添加边距，请从宽度中减去该值（请记住，边距会显示在两边，因此从宽度中减去的数字将是边距的两倍）。

<div style="width:30.33333%; float: left; margin: 1.5%;">
</div>

如果您可以访问样式表，则可以使用nth-of-type css选择器删除每3n项上每个3n-1和右边距的左边距，使它们与边缘齐平。

#yourselectorhere:nth-of-type(3n-1){
    margin-left: 0;
}
#yourselectorhere:nth-of-type(3n){
    margin-left: 0;
}

请注意，对于上述工作，您应将包装好的物品包装在一个div中，以便将它们与您不想放在浮动物品中的物品（即您的标题或其他身体内容）分开。如果你给这个包装div一个ID，它也会使用CSS更容易选择你的内容。

此外：

box-sizing：border-box;

为了防止边框或边框的任何不必要的溢出，我建议使用“box-sizing：border-box”样式。这将限制所有内容保留在浮动div内，而不会增加框的宽度。 （附加填充和边框将包含在div的33.333％宽度内，而不是将其大小添加到33.333％）。

此外，浮动div中的内容必须具有百分比宽度，而不是固定的像素大小。例如，您的图片必须是100％宽度，而不是300px。

答案 2 :(得分：0)

＆＃13;
＆＃13; 
  img {
    width: 100%;
  }
＆＃13; 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h3 class="text-center">Includes the following:</h3>
<div class="clearfix">
    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png " width="300 ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>

    <div class="col-xs-4 col-sm-4 col-md-4 ">
      <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png ">
      <h4>Video #1 - Know Yourself</h4>
      <a href="# ">
        <button class="btn btn-primary ">Watch Video</button>
      </a>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

<!DOCTYPE html>
<html>
    <body>
    <table border="1">
    <colgroup span="3">
    <col width="50"></col>
    <col width="100"></col>
    <col width="150"></col>
    </colgroup>
    <tr>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
    </tr>
    <tr>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
    </tr>
    </table>
    </body>
</html>

答案 4 :(得分：0)

使用它。它响应 Bootstrap 。我不知道这个代码片段发生了什么，但代码在完全响应时正常工作。

 img{
	width:100%;
	}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Includes the following:</h3>

<div class="col-md-4 ">
<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>


</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-12">

<div class="col-md-4 ">


<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>

<div class="col-md-4 ">

<img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png">
<h4>Video #1 - Know Yourself</h4>
<a href="#"><button class="btn btn-primary">Watch Video</button></a>

</div>
</div>
</div>

答案 5 :(得分：0)

这是您的需求代码

＆＃13;
＆＃13; 
    
  <div>
    <h3>Includes the following:</h3>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb1.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb2.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb3.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb4.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 30%;float:left; margin-left:3px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb5.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>

    <div style="width: 29%; float:left; margin:4px;">
    <img src="http://www.iliveaccountable.com/wp-content/uploads/thumb6.png" width="100%">
    <h4>Video #1 - Know Yourself</h4>
    <a href="#"><button class="btn btn-primary">Watch Video</button></a>
    </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题