Question

.propertydetailbox2 {
	overflow:auto;
  border: 1px black solid;
	
}

.propertydetailtextbox {
    width: 30%;
	float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
	margin: 0 auto;
	margin-right:1%;
	padding:20px;
	padding-left:50px;
	height: auto;
	text-align:left;
}

.propertydetailagentbox {
	width: 30%;
	height: 100%;
	float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
	margin: 0 auto;
	margin-left:1%;
	padding:20px;
}

<div class ="propertydetailbox2">
	<div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  
  <div class="propertydetailagentbox">1<br>2</div>
  
  
  
</div>

嗨我有一个容器，里面有两个盒子（子盒子），我希望父母可以使用overflow:auto;取得已经完成的最高孩子的身高，然后我想要第二个孩子（这是短的））与父母一样高。我已经尝试了CSS - Expand float child DIV height to parent's height给出的各种解决方案，但是使用相对和绝对堆栈，子节点彼此重叠，并使用margin-bottom：-99999px; padding-bottom：99999px;从底部切割第二个孩子的边界，我需要有响应的解决方案。

父div

.propertydetailbox2 {
    overflow:auto;
}

child1

.propertydetailtextbox {
    width: 30%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-right:1%;
    padding:20px;
    padding-left:50px;
    height: auto;
    text-align:left;
}

child2

.propertydetailagentbox {
    width: 30%;
    height: 100%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-left:1%;
    padding:20px;
}

请看jsfiddle的编辑，div应该是并排的但是在jsfiddle中它们会相互叠加

Answer 1

你可以用display而不是float：

柔性

＆＃13;

.propertydetailbox2 {
  display: flex;
  border: 1px black solid;
}

.propertydetailtextbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}

＆＃13;

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>

＆＃13;

表

＆＃13;

.propertydetailbox2 {
  display: table;
  table-layout:fixed;
  border-spacing:1vw;/* or 1vw 0 or whatever you need */
  width:100%;
  border: 1px black solid;
}

.propertydetailtextbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}

＆＃13;

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>

＆＃13;

格

＆＃13;

.propertydetailbox2 {
  display: grid;
  grid-template-columns: 50% 50%;
  border: 1px black solid;
}

.propertydetailtextbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-left: 1%;
  padding: 20px;
}

＆＃13;

<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>

＆＃13;

使子div与父div相同的高度

1 个答案: