Question

我需要彼此相邻的两个内联块，并且我需要第二个div的高度与第一个div的高度相同，但是有一些我无法做到的事情。有

无法为任何div指定高度。
第二个div不能绝对定位。
JavaScript不能用于设置第二个div的位置。

现在，我使用第二个div的绝对定位使其与第一个div的高度相同。有没有办法不使用它，1号或3号？

＆＃13;

#wrapper {
border: 1px solid red;
width: 50%;
position: relative;
}
#content1 {
border: 1px solid blue;
display: inline-block;
width: 40%;
}
#content2 {
border: 1px solid blue;
display: inline-block;
width: 40%;
position: absolute;
top: 0;
bottom: 0;

＆＃13;

<div id = 'wrapper'>
<div id = 'content1'> content1<br>content1 </div>
<div id = 'content2'> content2 </div>
</div>

＆＃13;

Answer 1

您可以使用弹性框来实现此目的。设置flex:0.4的行为与width:40%相同。

请注意所有版本的Internet Explorer don't play well with flexbox tho。

＆＃13;

#wrapper {
  border: 1px solid red;
  width: 50%;
  position: relative;
  flex-direction: row;
  display: flex;
}

#content1 {
  border: 1px solid blue;
  display: inline-block;
  flex: 0.4;
}

#content2 {
  border: 1px solid blue;
  display: inline-block;
  flex: 0.4;
}

＆＃13;

<div id='wrapper'>
  <div id='content1'>content1<br>content1</div>
  <div id='content2'>content2</div>
</div>

＆＃13;

Answer 2

基本上，您有两个选择：flexbox和表格。

<强> Flexbox的

灵活的框提供了一种通过默认align-self: stretch

拉伸弹性项目的方法

它的使用值是制作cross size所需的长度项目的边距框与行的大小相近可能，同时仍然尊重强加的约束最小高度/最小宽度/最大高度/最大宽度。

＆＃13;

#wrapper {
  border: 1px solid red;
  width: 50%;
  display: flex;
}
#content1, #content2 {
  border: 1px solid blue;
  width: 40%;
}

＆＃13;

<div id='wrapper'>
  <div id='content1'>content1<br />content1</div>
  <div id='content2'>content2</div>
</div>

＆＃13;

CSS表格

这不太灵活但是较旧（CSS2.1），因此它得到了更广泛的支持。同一行中的表格单元被拉伸到相同的高度。

＆＃13;

#wrapper {
  border: 1px solid red;
  width: 50%;
}
#inner-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
#inner-wrapper:after {
  content: ''; /* Fills remaining space */
}
#content1, #content2 {
  border: 1px solid blue;
  display: table-cell;
  width: 40%;
}

＆＃13;

<div id='wrapper'>
  <div id='inner-wrapper'>
    <div id='content1'>content1<br />content1</div>
    <div id='content2'>content2</div>
  </div>
</div>

＆＃13;

使用绝对定位设置具有相同高度的内联块，不指定高度，也不使用JavaScript

2 个答案: