並排對齊兩個響應div

Question

我正在嘗試編寫一個簡單的比較表，但無法獲得想要的結果。

一張圖像值一千個字，所以我草擬了我想要得到的東西：

當前，網站頁面是一列div（上面由“其他內容”區域表示）。 兩個div下方的灰色區域僅代表我用來容納它們的div，但我不需要它。

因此，基本上，我只想添加另一個div，其中包含兩個看起來像圖像中的div，但是歡迎每個建議：）

另外，divs當然必須響應。 ）

編輯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演示在這里

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

此處演示