작은 장치에서 상자 높이가 원하는 크기가 아닙니다. - css

-1

상자 크기를 모바일에 맞추는 문제가 있습니다 (부트 스트랩 사용) 3 상자, 숫자 1과 2가 이미지이고 숫자 3입니다. 텍스트, 을 가지고 있으며, 나는 모바일 크기로 화면 크기를 조정할 때 이것이 (상자 3 번 여기에 같은 상자 번호 2보다 짧은 높거나 일부 장치에 발생하는 것입니다 like this 작은 장치에서 상자 높이가 원하는 크기가 아닙니다. - css

보이는 : error

내가 필요 그것은 (2와 동일한 높이의 박스 번호 3)처럼 보일 것입니다 :

최대 높이와 최소 높이를 box3으로 설정하려고했지만 모든 장치와 일치하지 않기 때문에 해결 방법이 아닙니다.

HTML :

<section id="carousel-section"> 

    <div class="container-fluid"> 

    <div class="row feature"> 
     <div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 "> 
      <div class="carousel-margin"> 
<div id="myCarousel" class="carousel1 slide container-carousel" data- 
ride="carousel1"> 
    <!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
</ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
<div class="item active"> 
    <img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic" 
    id="mainImage1" > 
</div> 

</div> 

    </div> 
     </div> 
     </div> 
      <div class="col-lg-4 col-xl-4 col-md-5 col-xs-5 col-sm-5 "> 

     <div class="women-margin"> 
    <img src="images/women_3.png" alt="live" id="women-eyes1" > 
      </div> 
      </div> 




    <div class="col-lg-4 col-xl-4 col-md-7 col-xs-7 col-sm-7 "> 

     <div class="yellow-box"> 


     <h2 id="change_h2">THE DRAGON HUNTER</h2> 
      <br/> 
      <p id="change_p"> Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
     dolor aliqua. </p> 

     </div> 


     </div> 

    </div> 
</div> 

    </section>

이되는 문제 상자, 박스 번호 3 :

<div class="yellow-box">

CSS :

.yellow-box{ 
position: relative; 

display: block; 
    background-repeat: no-repeat; 
    background-size: cover; 

    min-height: 204px; 
margin-top:150px; 
background-color: #e6ff00; 
margin-left: -15px; 
margin-right: -15px; 


    }

이 박스 번호 2 :

.women-margin{ 
    margin: -1px -15px -2px -17px; 
position: relative; 
display: block; 
padding-right: 0; 
    }

,174,515

출처

2017-11-14 rir eij

우리에게 코드를 보여주십시오 추가 정보를 원하시면 ..이 코드를 사용해보십시오. 우리가 시도한 것을 보여주지 않으면 우리는 당신을 도울 수 없습니다 ... – Savado

죄송합니다, 코드를 추가했습니다. –

제가 flexbox를 사용해 볼 수 있을까요? 나를 원한다면. –

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<title>Example of Bootstrap 3 Nested Rows and Columns</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style type="text/css"> 
 
\t /* Some custom styles to beautify this example */ 
 
    .main-content{ 
 
\t \t min-height: 330px; 
 
     background: #dbdfe5; 
 
    } 
 
    .sidebar-content{ 
 
     min-height: 150px; 
 
     margin-bottom: 30px; 
 
     background: #b4bac0; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
\t <!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. --> 
 
\t <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-lg-4"> 
 
       <div class="main-content"></div> 
 
      </div> 
 
      <div class="col-xs-6 col-lg-4"> 
 
       <!--Nested rows within a column--> 
 
       
 
         <div class="sidebar-content"></div></div> 
 
        <div class="col-xs-6 col-lg-4"> 
 
         <div class="sidebar-content"></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     
 
</body> 
 
</html>

은 click here

출처

2017-11-14 13:01:51

이게 내가 필요로하는 것이 아니며, 상자 번호 2가 필요합니다. 1은 모바일에서 1, 데스크톱에서는 숫자 1 옆에 있습니다. –

이제 스 니펫 –

이 데스크탑 상자 2 및 3에 필요합니다. --- 다음 --- 1 번. 모바일 박스 2와 3이 필요합니다 - 아래 박스 번호 1 –

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Example of Bootstrap 3 Nested Rows and Columns</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    /* Some custom styles to beautify this example */ 
    .main-content{ 
     min-height: 330px; 
     background: #dbdfe5; 
    } 
    .sidebar-content{ 
     min-height: 150px; 
     margin-bottom: 30px; 
     background: #b4bac0; 
    } 
    .left{ 
     background: red; 
    } 
    .box2{ 
     background: green; 
     height: 100%; 
    } 
    .box3{ 
     height: 100%; 
     background: blue; 
    } 
    .right{ 
     background:green; 
     margin:0; 
     padding:0; 
    } 
</style> 
</head> 
<body> 
    <section id="carousel-section"> 
     <div class="container-fluid"> 
      <div class="row feature"> 
      <div class="col-lg-8 col-xl-8 col-md-12 col-xs-12 col-sm-12 left"> 
       <div class="carousel-margin"> 
        <div id="myCarousel" class="carousel1 slide container-carousel" data- 
       ride="carousel1"> 
         <!-- Indicators --> 
         <ol class="carousel-indicators"> 
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
          <li data-target="#myCarousel" data-slide-to="1"></li> 
          <li data-target="#myCarousel" data-slide-to="2"></li> 
         </ol> 

         <!-- Wrapper for slides --> 
         <div class="carousel-inner"> 
          <div class="item active"> 
           <img src="images/dragon_hunter_pic.png" alt="dragon_hunter_pic" 
           id="mainImage1" > 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="right col-lg-4 col-xl-4 col-md-12 col-xs-12 col-sm-12"> 
       <div class="col-lg-12 col-md-6 box2"> 
        <div class="women-margin"> 
         <img src="images/women_3.png" alt="live" id="women-eyes1" > 
        </div> 
       </div> 
       <div class="col-lg-12 col-md-6 box3"> 
        <div class="yellow-box"> 
         <h2 id="change_h2">THE DRAGON HUNTER</h2> 
          <br/> 
          <p id="change_p"> Lorem ipsum dolor sit amet, consectetur 
         adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
         dolor aliqua. </p> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </section> 
</body> 
</html>

출처

2017-11-15 08:06:37

나는 이것이 유일한 해결책이라고 생각합니다. –

https://stackoverflow.com/questions/47343344/make-two-side-by-side-divs-of-equal-heights –

작은 장치에서 상자 높이가 원하는 크기가 아닙니다. - css

답변

관련 문제