如何放置这样的元素

Question

我尝试将其设置为阻止父项：

display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;

，它可以工作，但是，例如，如果第二个块更大，它将中断。所以我正在寻找另一个决定。 （我不能使用css-grid）

Codepen Link

显示外观

Answer 1

请查看下面的以下工作示例，希望对您有所帮助：）

body .child {
  font-family: sans-serif;
}


.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 90%;
  margin: 0 auto;
}

.child {
  margin: 10px;
  padding: 50px 20px;
  min-width: 39%;
  box-shadow: inset 0 0 0 2px #000;
}

.parent {
  max-height: none;
}

.child--1 {
  order: 1;
}

.child--2 {
  order: 3;
}

.child--3 {
  order: 2;
  padding: 100px 20px;
}

@media screen and (max-width: 500px) {
  .parent {
    flex-direction: column;
  }
  .child {
    min-width: auto;
  }
}

<div class="parent">
  <div class="child child--1">Child 1</div>
  <div class="child child--2">Child 2</div>
  <div class="child child--3">Child 3</div>
</div>

Answer 2

尝试一下

.bigger {
			height: 300px !important;
		}
		
		.smaller {
			height: 99px !important;
			margin-bottom: 2px;
		}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">



<div class="container-fluid">
  <div class="row main">
  
    <div class="col-sm-6">
      <div class="col-sm-12"><p>
       1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur               itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi.
      </p> </div>
      <div class="col-sm-12"> 
      <p>
      2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint optio laudantium dolorem         doloremque non praesentium sit. Corporis quisquam soluta, ullam unde deleniti at expedita         facilis animi dicta facere quam iste!
      </p>
      </div>
    
    </div>
     <div class="col-sm-6"> 
     <p>
     3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate.
     </p>
     </div>
  </div>
</div>