두 div를 이미지 + 텍스트와 나란히 놓기

Question

이미지 div와 텍스트 아래에 1 div를 만들고 그 옆에 다른 div를 만들려고합니다. 나중에 반응이 필요합니다.

어떤 이유로 50 % 너비로 만들면 스택이 만들어 집니까? 나는 그들을 49.7 %로 끌어 올려야하는데, 여분의 패딩이 어디에서 왔는지는 모른다. 여기

는 바로 지금입니다 내용은 다음과 같습니다

HTML :

<div class="center"> 
    <div class="home2"> 
    <div class="home2_first"> 
     <img src="Images/home_pic1.png" /> 
     <p>Lorem Ipsum is simply dummy text!</p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
    </div> 
    </div> 

    <div class="home2"> 
    <div class="home2_second"> 
     <img src="Images/home_pic2.png" /> 
     <p>Lorem Ipsum is simply dummy text!</p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
    </div> 
    </div> 
</div> 

CSS :

.home2 { 
    margin: 0 auto; 
    width: 49.7%; 
    text-align: center; 
    display: inline-block; 
    background-color: red; 
    height: 400px; 
} 

.home2 p { 
    font-family: 'cabinRegular', arial, sans-serif, verdana; 
    color: #000000; 
    font-size: 18px; 
} 

.center { 
    margin: 0 auto; 
    width: 100%; 
    background-color: blue; 
} 

.home2_first img { 
    margin: 0 auto; 
    padding: 0; 
} 

.home2_second img { 
    margin: 0 auto; 
    padding: 0; 
} 

https://jsfiddle.net/Lq5vLdrm/7/

Answer 1

1. 솔루션 대신 display: block 및 float: left 또는 float: right을 사용하는 것입니다. 여기에서 jsfiddle을 참조하십시오. 그냥 부모 컨테이너를 제공합니다 : display: flex; flex-flow: row;를하고 아이들의에서 display: inline-block 속성을 제거하거나 display: block로 설정 내가 선호

2. 사용 인 flexbox. 여기 jsfiddle을 참조하십시오.

3. 테이블 레이아웃 좋은 구식 방법으로 그것을 수행 부모 display: table과 어린이를위한 display: table-cell. 여기 jsfiddle을 참조하십시오.
이뿐만 아니라 일

Answer 2

답변이의 스택 오버플로 여러 곳에서 발견된다 이 것이 정확합니다. Two inline-block, width 50% elements wrap to second line

display: inline-block 속성에 HTML의 공백이 고려되므로 문제가 나타납니다.

</div><div class="home2"> 

또는이처럼 그들을 배치 할 수 있습니다 :

가능한 수정은 다음과 같이 첫 번째 컨테이너의 닫는 태그와 두 번째의 여는 태그 사이의 공간을 제거하는 것입니다

</div><!-- 

--><div class="home2"> 

Answer 3

display: inline-block은 전체 컨테이너를 지원하지 못한다고 가정합니다. .home2에 float: left;을 추가하여 견고한 컨테이너를 제공 할 수 있습니다. 그런 다음 원하는 너비를 제공하십시오 (@media).

다음은 샘플 코드입니다.

.home2 { 
    margin: 0 auto; 
    width: 50%; 
    text-align: center; 
    float: left; 
    display: inline-block; 
    background-color: red; 
    height: 400px; 
}