더 큰 화면의 동일한 행/행/div에 이미지 정렬

Question

768 픽셀 미만의 화면에 대해 서로 아래에 정렬되는 3 개의 이미지 세트 (디스플레이 : 블록)가 있습니다. 이제 더 큰 화면의 경우, 이미지는 그 아래에 텍스트가있는 인라인 블록으로 표시되어야하고 (브라우저의 창 크기가 조정됨에 따라) 동일한 가로 수준에서 응답해야합니다.

시험 1 :

이

HTML이 :

<div class="row container-fluid rowimg" id="row4"> 
<div class="conatiner-fluid col-sm-12 images"> 
     <div class="conatiner-fluid col-sm-4 smcar"> 
      <figure class="carimg"> 
      <img src="images/Small Car.jpg" class="media-object pull-left" alt="Small Car"> 
      <figcaption>Car 1</figcaption> 
      </figure> 
     </div> 
     <div class="conatiner-fluid col-sm-4 fmlcar"> 
      <figure class="carimg"> 
      <img src="images/Family Car.jpg" class="media-object pull-left" alt="Family Car"> 
      <figcaption>Car 2</figcaption> 
      </figure> 
     </div> 
     <div class="conatiner-fluid col-sm-4 medcar"> 
      <figure class=" carimg"> 
      <img src="images/Medium Car.jpg" class="media-object pull-left" alt="Medium Car"> 
      <figcaption>Car 3</figcaption> 
      </figure> 
     </div> 

</div> 

CSS :

@media (min-width: 768px) { 
#row4{ 

    border: 1px dotted red; 
    margin:0; 
    padding:0; 
    text-align:center; 



} 
figure { 
display: inline-block; 
border: 1px dotted gray; 
padding:0; 
margin:0; 
vertical-align: bottom; 
} 

figure img { 
    vertical-align: bottom; 
    display:inline-block; 
} 
figure figcaption { 

    border: 1px dotted green; 
    text-align: center; 
    display:inline-block; 
    vertical-align: bottom; 
} 
} 

결과는 사업부의의입니다 지금, 여기에 내가 다음과 같은 결과를 시도 무엇 서로 겹치기 :

시험 2 :

'IMG 응답'이미지의 클래스에 추가하면 이미지가 잘 크기를 조정하지만, 중간 이미지도 수직 정렬로 부상 할 : 바닥. "media-object pull-left"포함 여부는 중요하지 않습니다. 다음과 같은 결과가 나타납니다.

이제 저는 지난 24 시간 이후로 다양한 버전을 시도했습니다. 플로트 추가, 플로트 제거, 상대 위치 및 절대 위치 지정 사용, 하단 : 0 (이미지는 같은 줄에 있지만 이미지는 반응적인 방식으로 동작하지 않음). 또한 컨테이너와 content-div 사이에 여분의 공백이있는 이유를 모르겠다. 여백과 패딩을 0으로 명시 적으로 설정했다. 중간 이미지가 올라가고 내려 갔지만 선을 거부했다. 이미지가 div에서 넘쳐 흐려져서 너무 많이 축소되었습니다. 이미지 크기를 조정하여 이미지의 크기를 조정하려고 시도했습니다. (하지만 반응이 빠른 디자인에서는 왜 그렇게해야합니까?)

나를 살려주세요. 제발 도와주세요.

Answer 1

는 이런 구조를 사용

<div class="row"> 
    <div class="col-xs-12 col-sm-4"> 
     img, text... 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     img, text... 
    </div> 
    <div class="col-xs-12 col-sm-4"> 
     img, text... 
    </div> 
</div> 

col-xs-12

가 화면 < 768px 100 %의 폭으로 표시 소자에 사용. 화면의 너비가 338 %를 초과하는 col-sm-4> 768px 더 나은 이해를 위해 다음 내용을 읽어보십시오. Bootstrap grid system

이미지 컨테이너의 오버플로 높이, 숨김, 텍스트 맞춤 : 중앙; img 요소에 100 % 높이를 설정하십시오. 그래서 당신은 같은 높이의 이미지를 얻고 양쪽에 잘립니다.