如何在特定位置对齐 div？答案

【问题标题】：How to align div in a specific position?如何在特定位置对齐 div？
【发布时间】：2022-01-25 03:32:12
【问题描述】：

.test1 {
  border: 2px solid black;
  height: 220px;
  width: 390px;
}

.test2 {
  border: 2px solid black;
  height: 220px;
  width: 390px;
}

.random-content {
  flex: 1 1 auto;
  text-align: justify;
  font-weight: 700;
  margin-top: 20%;
  margin-right: 150px;
}

.main-container {
  background-color: #fff;
  margin: 30px;
  display: flex;
  flex-direction: row;
  height: 100%;
  margin-top: 2%;
  margin-right: 27px;
  margin-left: 27px;
  max-height: 100%;
  max-width: 100%;
}

<div class="main-container">
<div class="test1">test1</div> //div is moving to right side, when random content is dis-appear 
<div class="test2">test2</div>  //div is moving to right side, when random content is dis-appear 
<div class="random-content">random content</div> //my random-content, when click checkbox "content" will disappear
</div>

我遇到了类似的 CSS 问题，

最初 test1、test2、随机内容 div 位于左侧。而且我对随机内容具有功能，例如，当复选框单击内容将消失时。所以问题来了。当内容通过点击事件消失时，test1、test2 div 的位置会向右移动。

【问题讨论】：

标签： html css

【解决方案1】：

在您的场景中使用max-width，这样第一个和第二个 div 的宽度永远不会超出某个宽度。

但是，这不是引入Flexbox 的原因，或者我不明白如果你不想自动调整 2-div-box，那你为什么要使用 Flexbox？

取 2 个 div 并将它们设为 display:inline-block 并赋予它们宽度。那你为什么要制作 Flexbox？那只用于自动调整，它自己做的事情，你说它有问题！

$(document).ready(function(){
  $("#check1").click(function(){
      $(".random-content").hide();
  });
});

.test1 {
  border: 1px solid black;
  height: 220px;
  width: 100px;
  max-width: 100px;
}

.test2 {
  border: 1px solid black;
  height: 220px;
  width: 100px;
  max-width: 100px;
}

.random-content {
  flex: 1 1 auto;
  text-align: justify;
}

.main-container {
  background-color: #fff;
  margin: 30px;
  display: flex;
  flex-direction: row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="main-container">
  <div class="test1">test1</div> 
  <div class="test2">test2</div>  
  <div class="random-content">random content //my random-content, when click checkbox "content" will disappear</div> 

</div>

<hr/>
<input type="checkbox" id="check1"> Click-Me</input>

【讨论】：