html - 当我在 Internet Explorer 中调整大小时

Question

嘿，谁能帮我解决这个问题

当我在 IE 中调整浏览器大小时，最初显示在底部的两个图像必须彼此相邻显示

所有 HTML 代码都是用 javascript 编写的，您不能更改 HTML 中的任何内容，但可以更改 CSS 中的代码

div.card {
  display: table;
  overflow: hidden;
}
.card .charts {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}
.card div.chart {
  height: 100%;
  width: 100%;
}
/*.card .chart { min-height: 200px; }*/

.card table.chart {
  min-height: 0;
}
.card div.chart:empty {
  display: none;
}
div.card > div.chart-name {
  font-size: 16px;
  padding-bottom: 14px;
}
div.card > div.chart-key {
  font-size: 12px;
  padding-top: 5px;
  clear: both;
}
div.card > div.chart-key > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #dadada;
}
div.card > div.chart-key > span + span {
  margin-left: 5px;
}
.card {
  width: 100%;
  padding: 5px 20px 5px 20px;
  margin-bottom: 0px;
  background: #ffffff;
  box-shadow: 1px 1px 1px #dfdfdf;
  box-sizing: border-box;
}
.card {
  width: 100%;
  padding: 5px 20px 5px 20px;
  margin-bottom: 0px;
  background: #ffffff;
  box-shadow: 1px 1px 1px #dfdfdf;
  box-sizing: border-box;
}

<div class="card " data-tab="Climate Survey" data-tab_sub="Climate Survey" data-controluid="E215EDBB-055F-1995-ED3972A87BABCA7B"></div>
<div class="charts">
  <div id="Chart_Bar_4" class="chart" style="width: 441px; height: 300px;"></div>
  <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" class="ct-chart-bar ct-horizontal-bars">
    <g class="ct-grids">

->

Answer 1

你有不同高度的 block 并应用 float: left 到它们。

有不同的可能解决方案:

• 确保所有 block 的高度相同。
• 使用 inline-block 而不是 float。
• 使用 flexbox。