Html 并排对齐两个响应div

我试图编写一个简单的比较表，但我无法得到我想要的

一张图片胜过千言万语，所以我勾勒出了我想要得到的：

目前，网站页面是一列div（上面的“其他内容”区域表示）。两个div下面的灰色区域只是表示我用来包含它们的div，但我不需要它

因此，基本上，我只想添加另一个div，其中包含两个类似于图中所示的div，但欢迎所有建议：）

当然，div必须是响应性的；）

编辑1

正如所建议的，这里的代码到目前为止仍然有效：我尝试了很多方法，但一旦我在div周围添加了一些空间，它们就开始变得一团糟。大部分代码是不必要的，我知道：(

*{
颜色：#fff；
字体系列：“Avenir”，无衬线；
字号：18px；
边界0；
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
对齐内容：居中对齐；
边缘底部：20px；
宽度：100%；
背景位置：中心；
背景尺寸：封面；
}
.内容{
宽度：100%；
}
.集装箱{
背景色：hsl（200、100%、95%）；
保证金：自动；
填充：0%；
}
.比较容器{
利润率：0%；
浮动：左；
高度：自动；
宽度：50%；
}
.比较{
填充：5%；
身高：100%；
宽度：100%；
}
.lite{
背景色：hsl（40,100%，50%）；
}
.满{
背景色：hsl（150,80,50%）；
}
.按钮{
背景色：rgba（255、255、255、0.2）；
颜色：#fff；
字体系列：；
字号：18px；
字号：500；
线高：200%；
文字装饰：无；
文本转换：大写；
显示：内联块；
填充：1%3%；
边框：2倍实心#fff；
边界半径：0；
大纲：无；
}
.按钮：悬停，
.按钮：激活{
背景色：#fff；
}
.按钮：hover.lite{
颜色：hsl（40,100%，50%）；
}
.按钮。已满：悬停{
颜色：hsl（150,80,50%）；
}
氢{
字体大小：36px；
保证金：自动；
}
h3{
字号：21px；
利润率：2.5%0；
}
h4{
字号：21px；
利润率：10%0；
}
保险商实验室{
列表样式：无；
利润率：5%0；
}
李{
利润率：2.5%0；
}

第一组
字幕

项目一
项目二
项目三
项目四
-
-
-
特征

文本
第二组
字幕

项目一
项目二
项目三
项目四
项目五
项目六
项目七
特征

文本

试试这个：

body
{
  background-color: #fcfcfc;
}
#other
{

  max-width: 540px;

  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;

  vertical-align: top;


}
.container
{
  text-align: center;
  padding: 15px;  
}
.left-div
{
  display: inline-block;
  max-width: 300px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
  vertical-align: top;
}
.right-div
{
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
}
.left-text, .right-text
{
  font: 300 16px/1.6 'Helvetica Neue' sans-serif;
    color: #333;
}
@media screen and (max-width: 600px) 
{
  .left-div, .right-div
    {
       max-width: 100%;
    }
}

试试这个：

body
{
  background-color: #fcfcfc;
}
#other
{

  max-width: 540px;

  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;

  vertical-align: top;


}
.container
{
  text-align: center;
  padding: 15px;  
}
.left-div
{
  display: inline-block;
  max-width: 300px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
  vertical-align: top;
}
.right-div
{
  display: inline-block;
  max-width: 150px;
  text-align: left;
  padding: 30px;
  background-color: #ddd;
  border-radius: 3px;
  margin: 15px;
}
.left-text, .right-text
{
  font: 300 16px/1.6 'Helvetica Neue' sans-serif;
    color: #333;
}
@media screen and (max-width: 600px) 
{
  .left-div, .right-div
    {
       max-width: 100%;
    }
}

---

您应该像这样使用

calc

css功能：

width: calc(50% - 32px);

它有助于布局基于百分比的布局

编辑：我刚意识到你想在盒子里放一些高度未知的内容。所以我还添加了一个

flex

显示器

---

您应该像这样使用

calc

css功能：

width: calc(50% - 32px);

它有助于布局基于百分比的布局

编辑：我刚意识到你想在盒子里放一些高度未知的内容。所以我还添加了一个

flex

显示器

---

你能发布你已经尝试过的代码吗？你应该发布一些代码来显示你已经尝试过的内容。这些列需要相同的高度吗？@SanjeevK sure:）@MyiEye done:）是的，它们需要相同，即使内容不同。理想情况下，它们应该适合下面的lite grey div，但要适应其中的内容。您可以发布您尝试过的代码吗？您应该发布一些代码来显示您迄今为止尝试过的内容。列是否需要相同的高度？@SanjeevK-sure:）@MyiEye-done:）是的，它们需要相同，即使内容不同。理想情况下，它们应该适合下面的lite灰色分区，但要适应其中的内容。看起来效果不错！我现在正试图使它尽可能的灵敏，因为你在这里使用了px。具有讽刺意味的是，删除calc函数似乎达到了我想要的效果：可以说，这可能只是一个糟糕的html语法问题！很酷，很高兴你发现它很有用。请帮助我知道我可以如何进一步帮助你。如果您对我的答案感到满意，请将其标记为已接受：）是的，这很有帮助，至少对于清除HTML；）一旦我合并了所有内容，我可能会自己回答这个问题，但现在你的答案是最接近的：）似乎工作得很好！我现在正试图使它尽可能的灵敏，因为你在这里使用了px。具有讽刺意味的是，删除calc函数似乎达到了我想要的效果：可以说，这可能只是一个糟糕的html语法问题！很酷，很高兴你发现它很有用。请帮助我知道我可以如何进一步帮助你。如果您对我的答案感到满意，请将其标记为已接受：）是的，这很有帮助，至少对于清除HTML；）一旦我合并了所有内容，我可能会自己回答这个问题，但现在你的答案是最接近的：）不幸的是，我需要两个div相同，不管内容如何：（不幸的是，我需要两个div相同，不管内容如何：(