调整浏览器窗口大小会在右侧

Question

我在制作带有内部元素的容器元素的样本时遇到了这个问题。这些内部元素设置了浮动属性，但这会使浏览器窗口调整大小时容器边框看起来很奇怪。

尽管由于float属性和min-width设置，内部元素一个在另一个下面，但它会影响容器元素的边框。它在右边留下了一个巨大的空间。不知道为什么会这样。

以下是我所做的：

.container {
  border: 1px solid #AAA;
}
.container::after {
  content: " ";
  display: table;
  clear: both;
}
.left-panel,
.right-panel {
  width: 50%;
  float: left;
  min-width: 340px;
  box-sizing: border-box;
}
.left-panel {
  border: 1px solid #F1FB3B;
}

<div class='container'>
  <div class='left-panel'>
    <div class='info'>
      <p style='font-weight:800;font-size:13px;line-height:2;'>Info:</p>
    </div>
    <div class='data'>
      <p style='font-weight:800;font-size:13px;line-height:2;'>Data:</p>
    </div>
  </div>
  <div class='right-panel'>
    <img src='http://lorempixel.com/520/300' height='210' width='100%' style='vertical-align:top;' />
  </div>

Answer 1

这是神奇的display: table-cell;✨

＆＃13;

＆＃13;

.container {
  border: 1px solid #AAA;
}
.container::after {
  content: " ";
  display: table;
  clear: both;
}
.left-panel,
.right-panel {
  width: 50%;
  display: table-cell;
  min-width: 340px;
  box-sizing: border-box;
}
.left-panel {
  border: 1px solid #F1FB3B;
}

＆＃13;

<div class='container'>
  <div class='left-panel'>
    <div class='info'>
      <p style='font-weight:800;font-size:13px;line-height:2;'>Info:</p>
    </div>
    <div class='data'>
      <p style='font-weight:800;font-size:13px;line-height:2;'>Data:</p>
    </div>
  </div>
  <div class='right-panel'>
    <img src='http://lorempixel.com/520/300' height='210' width='100%' style='vertical-align:top;' />
  </div>

＆＃13;

＆＃13;

＆＃13;