将两个响应式div并排排列

Question

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

的图像胜过千言万语，所以我勾勒了我想获得：

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

所以，基本上，我只想补充含有两个div看起来像图像中的另一格，但每一个建议是值得欢迎的：）

此外，申报单必须响应，当然， ）

编辑1

作为建议，这里是到目前为止的工作代码：我试了很多东西，反正当我周围添加div的一些空间，他们开始搞的一团糟。它的大部分代码是不必要的，我知道：（

* { 
 
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; 
 
}

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

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