个性化的表格，包含1行和2列

Question

我想在背景上创建一个列之间有空格的表，如下所示：

当我调整页面大小时，文本不应退出框

#banner {
  background-color: red;
  margin-top: 70px;
  background-size: cover;
  height: 455px;
  margin-left: 35px;
  margin-right: 35px;
  overflow: hidden;
}
.r1c1 {
  float: left;
  overflow: hidden;
  width: 90%;
}
.r2c1 {
  float: left;
  overflow: hidden;
}

<div id="banner">
  <div class="r1c1">

    <h2>Once you've experienced the pleasure and comfort of hydronic heating, there's no going back.</h2> 
  </div>
  <div class="r2c1">
    <img class="voucher1" src="voucher1.png">
  </div>
</div>

Answer 1

如果您确实想要使用表格，我建议您直接使用<table>元素。如果您正在制作附加图像中的显示内容，我会提出一些建议：

1. 尝试使用边距来保持表格单元格分离
2. 尝试在文本周围放置一个容器div并控制其大小，以创建单元格之间有空格的外观。

3. 尝试使用Twitter Bootstrap。它是开源的，非常棒且易于使用。它有大量不同元素的预设。制作你想要的东西就像这样简单：

   <div class="col-lg-5 col-md-5" id="r1c1"><div>
   <div class="col-lg-2 col-md-2" id="spacer"><div>
   <div class="col-lg-5 col-md-5" id="r2c1"><div>
   

无需进一步定义col-lg和col-md类，您已经利用了bootstraps网格系统并创建了一个可伸缩的表。希望有所帮助！