두 개의 응답 가능한 div를 나란히 정렬하십시오.

Question

간단한 비교 테이블을 코딩하려고하는데 원하는 것을 얻을 수 없습니다.

이미지는 천 개 단어 가치가있다, 그래서 내가 좀하고 싶습니다 무엇을 스케치 :

현재

는 웹 사이트 페이지는 "다른 콘텐츠에 의해 위의 표현 된 div의 단일 컬럼 (이다 " 지역). 두 div 아래의 회색 영역은 내가 포함 할 div를 나타 내기위한 것일 뿐이지 만 필요하지는 않습니다.

그래서, 기본적으로, 난 그냥 이미지의 모습이 개 된 div를 포함하는 다른 사업부를 추가 할 수 있지만, 모든 제안을 환영합니다 :)

또한, div의는 물론, 응답해야합니다; 제안한 것처럼)

EDIT 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