부트 스트랩 - 두 개의 열이 동일한 높이로 세 개의 응답 이미지가 있습니다 (왼쪽과 오른쪽 중 하나)

-3

이미 다른 솔루션을 사용해 동일한 높이의 열 두 개를 얻었습니다. 그러나 불행히도이 기능을 사용할 수 없습니다. 문제는, 제가 "세로 모드"에서 왼쪽에 하나, "가로 모드"에서 오른쪽에 두 개의 이미지가 있다는 것입니다. 오른쪽의 두 이미지를 함께 사용하면 왼쪽의 이미지와 같은 높이가됩니다.부트 스트랩 - 두 개의 열이 동일한 높이로 세 개의 응답 이미지가 있습니다 (왼쪽과 오른쪽 중 하나)

나는 이것이 해결책이 될 수 있다고 생각하지만, 제대로 작동하지 않았다. 오른쪽의 두 항목은 각각 왼쪽에있는 div의 50 %의 높이를 가질 수있다. 항목 안의 이미지는 높이를 채우고 자동 너비가 있어야합니다. 이처럼

: Image of what I want. 여기

내 기본 코드는 지금까지 모습입니다 : https://jsfiddle.net/qg7t976L/

.padding-0 { 
 
    padding: 0; 
 
} 
 

 
img { 
 
    width: 100%; 
 
} 
 

 
img { 
 
    border: 1px white solid; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="work" class="content"> 
 
    <div class="container-fluid work-body"> 
 
    <div class="row"> 
 
     <div class="padding-0 col-sm-6"> 
 
     <div class="work-inner"> 
 
      <div class="work-item"> 
 
      <img src="http://placehold.it/500x750" alt="work1"> 
 
      </div> 
 
      <!--/.work-item--> 
 
     </div> 
 
     <!--/.work-inner--> 
 
     </div> 
 
     <div class="padding-0 col-sm-6"> 
 
     <div class="padding-0 work-inner col-sm-12"> 
 
      <div class="work-item"> 
 
      <img src="https://placehold.it/450x250" alt="work2"> 
 
      </div> 
 
      <!--/.work-item--> 
 
     </div> 
 
     <div class="padding-0 work-inner col-sm-12"> 
 
      <div class="work-item"> 
 
      <img src="https://placehold.it/500x250" alt="work3"> 
 
      </div> 
 
      <!--/.work-item--> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--/.container--> 
 
</div> 
 
<!--/work-->

출처

2017-05-16 fab

포스트 – ZimSystem

미안 해요, 난 여전히 내 텍스트를 편집하지만, Enter 키를 누르하고 질문 제출 하였다하십시오 코드 ... – fab

당신은이 코드를 시도 할 수 있습니다.

HTML :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
    <div class="row row--equal"> 
     <div class="col-md-6 no-padding"> 
     <div class="item item--full-height"> 
      <img src="https://i.stack.imgur.com/WS7U5.png" alt=""> 
    </div> 
    </div> 
    <div class="col-md-6 item--half-height no-padding"> 
    <div class="item "> 
     <img src="https://i.stack.imgur.com/cslWU.png" alt=""> 
    </div> 
    <div class="item item--half-height"> 
     <img src="https://i.stack.imgur.com/niAPD.png" alt=""> 
    </div> 
    </div> 
</div> 
    </div> 
</body> 
</html>

CSS :

.row--equal{ 
    display: flex; 
} 
.no-padding{ 
    padding-left: 0px !important; 
    padding-right: 0px !important; 
} 
.item{ 
    margin-right: 1px; 
    margin-bottom: 1px; 
} 
.item img{ 
    width: 100%; 
    height: 100%; 
} 
.item--full-height{ 
    height: 100%; 
} 
.item--half-height{ 
    height: 50%; 
}

출처

2017-05-16 19:08:25

부트 스트랩 - 두 개의 열이 동일한 높이로 세 개의 응답 이미지가 있습니다 (왼쪽과 오른쪽 중 하나)

답변

관련 문제