Question

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

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

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

所以，基本上，我只是想添加另一个div，其中包含两个看起来像图像的div，但是每个建议都是受欢迎的：）

此外，div当然必须是敏感的; ）

编辑1

正如所建议的那样，这里的代码到目前为止：我尝试了很多东西，无论如何，一旦我在div周围添加了一些空间，它们就开始搞砸了。大多数代码都是不必要的，我知道：（

＆＃13;

* {
color: #fff;
font-family: "Avenir", sans-serif;
font-size: 18px;

border 0;
margin: 0;
padding: 0;
}

.container {
display: flex;
align-content: center;

margin-bottom: 20px;
width: 100%;

background-position: center;
background-size: cover;
}

.content {
width: 100%;
}

.container {
background-color: hsl(200, 100%, 95%);

margin: auto;
padding: 0%;
}

.comparecontainer {
margin: 0%;
float: left;

height: auto;
width: 50%;
}

.compare {
padding: 5%;

height: 100%;
width: 100%;
}

.lite {
background-color: hsl(40, 100%, 50%);
}

.full {
background-color: hsl(150, 80%, 50%);
}



.button {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
font-family: ;
font-size: 18px;
font-weight: 500;
line-height: 200%;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
padding: 1% 3%;
border: 2px solid #fff;
border-radius: 0;
outline: none;
}

.button:hover,
.button:active {
background-color: #fff;
}

.button:hover .lite {
color: hsl(40, 100%, 50%);
}

.button .full:hover {
color: hsl(150, 80%, 50%);
}



h2 {
font-size: 36px;
margin: auto;
}

h3 {
font-size: 21px;
margin: 2.5% 0;
}

h4 {
font-size: 21px;
margin: 10% 0;
}

ul {
list-style: none;
margin: 5% 0;
}

li {
margin: 2.5% 0;
}

＆＃13;

    <div class="container">
<div class="content">

    <div class="comparecontainer">
    <div class="compare lite">
<h2>First DIV</h2>
<h3>Subtitle</h3>

    <ul>
<li><b>item</b> one</li>
<li><b>item</b> two</li>
<li><b>item</b> three</li>
<li><b>item</b> four</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>feature</li>
    </ul>

<h4>text</h4>

<a href="#" class="button lite">button</a>

    </div>
    </div>

    <div class="comparecontainer">
    <div class="compare full">
<h2>Second DIV</h2>
<h3>Subtitle</h3>

    <ul>
<li><b>item</b> one</li>
<li><b>item</b> two</li>
<li><b>item</b> three</li>
<li><b>item</b> four</li>
<li><b>item</b> five</li>
<li><b>item</b> six</li>
<li><b>item</b> seven</li>
<li><b>feature</b></li>
    </ul>

<h4>text</h4>

<a href="#" class="button full">button</a>

    </div>
    </div>

</div>
    </div>

＆＃13;

Answer 1

您应该使用calc css功能，如下所示：

width: calc(50% - 32px);

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

编辑：我刚刚意识到你想在盒子里面有未知高度的内容。所以我也添加了flex显示。

CODEPEN DEMO HERE

div {
  display:block; 
  width: 100%; 
  background: rgba(0,0,0,0.8);
  border: 1px solid #fff;
}

.wrapper {
    margin-top: 12px;
    display: flex;
    box-sizing: border-box;
    padding: 32px 16px;
}

.wrapper > div {
    box-sizing: border-box;
    width: calc(50% - 32px);
    float: left;
    margin: 0 16px;
}

body {
  max-width: 600px;
  margin: 0 auto;
  color: #fff;
}

Answer 2

试试这个：

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

DEMO HERE

将两个响应的div并排对齐

2 个答案: