调整浏览器窗口大小会在右侧留下空间答案

【问题标题】：Resizing browser window leaves space on right调整浏览器窗口大小会在右侧留下空间
【发布时间】：2016-01-09 22:23:29
【问题描述】：

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

即使内部元素由于 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>

【问题讨论】：

那是因为它的浮动：S
通过设置容器的宽度或使用表格来修复它
@CodeiSir 好吧，在设置容器宽度的情况下，它无助于使页面响应。
OR 表（或 css 表或 flex）...您的问题中也没有任何响应
@CodeiSir 抱歉，我在上面的问题中没有提到，但我想知道上述情况的解决方法，同时牢记响应性。表应该是我应该继续的方法吗？

标签： html css css-float

【解决方案1】：

这就是魔法display: table-cell;✨

.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;
}

<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>

【讨论】：

不知道您测试的是哪个浏览器，但在 chrome 浏览器上对我不起作用。我的左右面板使用display:table-cell css，但效果与之前的相同。即一个有间距问题