Question

如何并排对齐三个DIV，但要防止其中的内容塌陷。
在屏幕截图中，我尝试增加第二个红色框的字体大小时，
整个DIV崩溃，然后跌至最低点。

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

或使用弹性盒

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

对齐三个DIV，而不会折叠DIV中的内容

1 个答案: