Question

我有两个并排的元素：图表和DataTable。 DataTable可以通过与页面交互来改变大小，并且在调整窗口大小时图表应该改变大小。我希望较短的一个总是以较高的一个为中心，即它们包含div的当前高度。如果可能的话，我希望它只在CSS中完成。这个答案似乎对我不起作用：CSS - vertically align two or more (side by side) elements in a div;

我有以下内容：

<div id="container">
    <svg id="chart"></svg>
    <div id="dataTable"></div>
</div>

CSS：

#container {
    height: 50%;
    width: 80%;
    margin: 0 auto;
}

#chart {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

#dataTable {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

Answer 1

您可以尝试使用Flexbox。对齐项目将确保项目保持居中。

小提琴：https://jsfiddle.net/yftaLtxr/

<强> HTML

<div id="container">
    <svg id="chart">a</svg>
    <div id="dataTable">b</div>
</div>

<强> CSS

#container {
    height: 50%;
    width: 80%;
    margin: 0 auto;
    display:flex;
    align-items:center;
}

#chart {
    height:50vh;
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
    background-color:#f00;
}

#dataTable {
    overflow: hidden;
    float: left;
    width: 50%;
    display: inline-block;
}

Answer 2

您无法同时使用浮点和内嵌块。我试着去掉花车。

然后重新设置内联块元素之间的空白。

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid green;
  font-size: 0;
  /* whitespace fix */
}
#container > * {
  font-size: 1em;
  /* reset font-size */
}
#chart {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  background: red;
  height: 50px;
}
#dataTable {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  height: 150px;
  background: blue;
}

＆＃13;

<div id="container">
  <svg id="chart"></svg>
  <div id="dataTable"></div>
</div>

＆＃13;

将两个并排元件彼此垂直对齐

2 个答案: