html - 对齐三个 DIV 而不折叠 DIV 内的内容

Question

如何并排对齐三个 DIV 但防止其中的内容折叠。
在屏幕截图中，一旦我尝试增加第二个红色框的字体大小，
整个 DIV collpase 并落在底部。

.admin_screen {
    display: inline-block;
}
h3.adscreen_header {
    text-align: -webkit-center;
    font-size: 20px;
    background: beige;
    margin-bottom: 10px;
}
p.admintext {
    font-size: 16px;
    margin-bottom: 10px;
    /* line-height: 31px; */
}
span.adminboldtext {
    font-weight: 600;
}
h3.screen1_header {
    text-align: -webkit-center;
    font-size: 20px;
    background: beige;
    margin-bottom: 10px;
}
.screen1header{
	float: right;
}

<div class="admin_screen">
          <h3 clasS="adscreen_header">患者用画面
</h3>
<p class="admintext"><span class="adminboldtext">デモ用URL</span>&nbsp;<a href="http://www.jyunbanmachi.com/asp/mid1212"><u>http://www.jyunbanmachi.com/asp/mid1212</u></a><br><span class="adminboldtext">ログインID</span>&nbsp;&nbsp;&nbsp;不要&nbsp;&nbsp;&nbsp;&nbsp; パスワード&nbsp;&nbsp;&nbsp;&nbsp; 不要</p>
          <img src="images/admin_screen.png">
        </div>
        <div class="screen1header">
          <h3 clasS="screen1_header">待合室用&nbsp;　順番画面</h3>
          <p class="screen1text">デモの閲覧申し込みをして頂くとデモ用URLやログインID等をメールにてご案内いたします。</p>
           <img src=images/screen1.png></div>

在这里我试图显示 3 图片，有自己的标题、副标题和图像。

Screenshot

Answer 1

写入最大宽度属性

.admin_screen {
  max-width: 40%;
  float left;
}

.screen1header {
  max-width: 60%;
  float left;
}

或者使用 flex 盒子

<div class="flex">
  <div class="admin_screen"></div>
  <div class="screen1header"></div>
</div>


.flex {
    display: flex;
}
.admin_screen {
    flex: 1; // change value
}
.screen1header {
    flex: 2; // change value
}