如何将部分垂直对齐显示为内联块

Question

我试图重新创建类似于此示例Mozilla Comic-Strip Tutorial的内容，但是我的框最终会有不同的垂直对齐方式。

我环顾四周，看到了这个question，解决方案对我来说很好。我很想知道我的案例与Mozilla的例子有什么区别。

另外，很高兴知道为什么两个“infoSubPanel”div也没有垂直对齐。

提前致谢。

P.S。我也看了this，但第一个技巧帮助了我。

P.P.S。对于本例的一部分，我也查看了这个other question。

我已粘贴下面的代码：

columnNames = df.schema.names

Answer 1

  

我环顾四周，发现了这个问题和解决方案   对我来说很好。我很想知道有什么区别   在我的案例和Mozilla的例子之间。

• 这是SO的一个非主题问题。

  

另外，很高兴知道两个infoSubPanel div的原因   也没有垂直对齐。

• 您使用inline-flex这是一个内联元素，如inline-block，默认情况下为vertical-align:baseline，设置为vertical-align:top

body {
  background-color: #efefef;
  font-family: sans-serif;
  text-align: left;
  padding: 20px 0 0 20px;
}
.mainScr {
  max-width: 1500px;
  margin: 1px;
}
.mainInfo {
  background-color: #D4FCD5;
  min-width: 495px;
  max-width: 1470px;
  min-height: 100px;
  border: 1px double green;
}
.screenParts {
  vertical-align: top;
  width: 49%;
  max-width: 730px;
  min-width: 495px;
  min-height: 450px;
  border: 1px solid white;
  background: #F7E7C4;
  margin: 1px;
  display: inline-block;
}
.graphicsPanel {
  width: 100%;
  height: 66%;
  border: 1px solid blue;
  background: lightblue;
}
.dataPlots {
  width: 100%;
  height: 33%;
  border: 1px solid brown;
  background: beige;
}
.infoSubPanel {
  min-height: 450px;
  width: 48%;
  min-width: 250;
  display: inline-flex;
  border: 1px solid brown;
  vertical-align:top
}
.scrollabletextbox {
  width: 100%;
  height: 100%;
  min-height: 500px;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 100%;
  overflow: scroll;
  resize: none;
  text-align: left;
}

<div class="mainInfo">
  <h1>Very important data goes here...</h1>
</div>
<div class="mainScr">
  <div id="visual" class="screenParts">
    <div class="graphicsPanel">
      <h1>Some Graphics Goes Here</h1>
      <h1>Some Graphics Goes Here</h1>
      <h1>Some Graphics Goes Here</h1>
      <h1>Some Graphics Goes Here</h1>
      <h1>Some Graphics Goes Here</h1>
    </div>

    <div class="dataPlots">
      <div style="display: block;">
        <p>charts and plots go here</p>
        <p>charts and plots go here</p>
        <p>charts and plots go here</p>
        <p>charts and plots go here</p>
        <p>charts and plots go here</p>
      </div>
    </div>
  </div>
  <div id="detail" class="screenParts">
    <div class="infoSubPanel">
      <div style="display: block;">
        <p>Some info and date-time will go here...</p>
        <p>Some info and date-time will go here...</p>
        <p>Some info and date-time will go here...</p>
        <p>Some info and date-time will go here...</p>
        <p>Some info and date-time will go here....</p>
        <p>Some info and date-time will go here...</p>
      </div>
    </div>
    <div class="infoSubPanel">
      <textarea class="scrollabletextbox" name="logs">
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </textarea>
    </div>
  </div>

</div>

Answer 2

我想你只需要在你的CSS中添加这些变化。

.infoSubPanel{
float:left
}
.scrollabletextbox {       
/* height: 100%; */remove this
/* min-height: 500px; */remove this
float: left;
}

Answer 3

要垂直对齐内联块元素，只需使用vertical-align: top;

设置每个元素的样式