2つの対応するdivを並べて並べる

Question

私は単純な比較表を作成しようとしていますが、私は何をしたいのですか？

画像は千の言葉の価値があるので、私は私が取得したいと思い何スケッチ：

現在、ウェブサイトのページが（「他のコンテンツで上記の表現のdivの単一の列であります" エリア）。 2つのdivの下にある灰色の領域は、私がそれらを含むために使用しているdivを表すことだけですが、私はそれを必要としません。

だから、基本的に、私は画像のように見える2つのdivを含む別のdivを追加したいのですが、すべての提案は大歓迎です。）

また、div要素はもちろん、応答する必要があります。私はdiv要素の周りにいくつかのスペースを追加すると、彼らはめちゃくちゃを取得するために開始し、とにかく、多くのことを試してみました：）

EDIT 1

示唆したように、ここではこれまで働いていたコードです。それのほとんどのコードは、私が知っている、不要である：（

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