这是我的代码： 当我不放大时，它看起来像这样： regular
但是，当我放大时，与其看起来像上面的一个大矩形，不如看起来是许多小矩形
zoom
有人可以帮我做，所以当我放大时，它看起来一样，只是更小？谢谢！
.div {
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
}<div class="div" style="height: 200px; width: 55%"><div style="float: left; width: 70%"><div style="display: block;"><h1 style=" display: inline-block; float: left;">RHT, <span style="padding-left: 20px;">Red Hat Inc</span></h1><br><br><h1 style="float: left; font-size: 17px;">Red Hat, Inc. develops and provides open source software and services, including the Red Hat Linux operating system. The Companys web site offers information and news about open source software and provides an online community of open source software users and developers.</h1></div></div><div style="float: right; width: 30%"><h5><br></h5><h6 style="text-align: right">1801 Varsity Drive Raleigh, NC 27606 United States</h6><h5 style="text-align: right;">11,870 Employees</h5></div></div><div class="div" style="height: 200px; width: 30%"><div style="float: left; padding-left: 20px;"><h4 style="line-height: 20px;">Enterprise Value</h4><h4 style="line-height: 20px;">Market Cap</h4><h4 style="line-height: 20px;">Cash</h4><h4 style="line-height: 20px;">Total Debt</h4><h4 style="line-height: 20px;">Pref Equity</h4><h4 style="line-height: 20px;">Minority Int.</h4></div><div style="float: right; padding-right: 20px;"><h4 style="line-height: 20px;">29,583.28</h4><h4 style="line-height: 20px;">31,288.21</h4><h4 style="line-height: 20px;">2,472.93</h4><h4 style="line-height: 20px;">768.00</h4><h4 style="line-height: 20px;">0.00</h4><h4 style="line-height: 20px;">0.00</h4></div></div><div class="div" style="height: 200px; width: 15%"><div style="float: left; padding-left: 10px;"><h4 style="line-height: 20px;">Shares Out</h4><h4 style="line-height: 20px;">Float %</h4><h4 style="line-height: 20px;">SI</h4><h4 style="line-height: 20px;">SI % Float</h4><h4 style="line-height: 20px;">Days to Cover</h4></div><div style="float: right; padding-right: 10px;"><h4 style="line-height: 20px;">177.1</h4><h4 style="line-height: 20px;">99.4%</h4><h4 style="line-height: 20px;">5.7</h4><h4 style="line-height: 20px;">3.26%</h4><h4 style="line-height: 20px;">3.37</h4></div></div>
<!-- new row -->
<div class="div" style="height: 200px; width: 20%"><div style="padding-left: 20px;"><h3>Current Price: <span class="Trsdu(0.3s) Fw(b) Fz(36px) Mb(-4px) D(ib)" data-reactid="35">135.26</span> <span style="color: red"><span class="Trsdu(0.3s) Fw(500) Pstart(10px) Fz(24px) C($dataRed)" data-reactid="36">-1.06 (-0.78%)</span></span></h3><h4>Today Date / Time: 07/04/2018 07:09 pm</h4><h4>YTD Return: 45.7%</h4></div></div><div class="div" style="height: 200px; width: 11%"><div style="float: left; padding-left: 10px;"><h5 style="line-height: 20px;">52 Week Hi/Low</h5><h5 style="line-height: 20px;">52 Week Return</h5><h5 style="line-height: 20px;">Month Return</h5><h5 style="line-height: 20px;">Month Return</h5></div><div style="float: right; padding-right: 10px;"><h5 style="line-height: 20px;">88.75</h5><h5 style="line-height: 20px;">99.2%</h5><h5 style="line-height: 20px;">35.9%</h5><h5 style="line-height: 20px;">8.6%</h5></div></div><div class="div" style="height: 200px; width: 10%"><div style="float: left; padding-left: 20px;"><h5 style="line-height: 20px;">PE</h5><h5 style="line-height: 20px;">EV/EBITDA</h5><h5 style="line-height: 20px;">P/S</h5><h5 style="line-height: 20px;">P/B</h5><h5 style="line-height: 20px;">Div Yield</h5><h5 style="line-height: 20px;">Beta</h5></div><div style="float: right; padding-right: 20px;"><h5 style="line-height: 20px;">70.2x</h5><h5 style="line-height: 20px;">42.8x</h5><h5 style="line-height: 20px;">8.9x</h5><h5 style="line-height: 20px;">17.8x</h5><h5 style="line-height: 20px;">0.0%</h5><h5 style="line-height: 20px;">85.2</h5></div></div><div class="div" style="height: 200px; width: 59%"><div style="float: left; padding-left: 10px;"><h5 style="line-height: 20px;">Valuation</h5><h5 style="line-height: 20px;">Thesis</h5><h5 style="line-height: 20px;">Catalysts</h5><h5 style="line-height: 20px;">Risks</h5><h5 style="line-height: 20px;">Actions</h5><h5 style="line-height: 20px;">Current Exp</h5></div><div style="float: right; padding-right: 10px;"><h5 style="line-height: 20px;"><span id="a">Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo m...</span><div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. </p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="b">I really like this stock. I really like this stock. I really like this stock. I really like this sto...</span><div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="c">sdf...</span><div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdf</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="d">sdfdsf...</span><div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdfdsf</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="e">my name is matthew, I will work on the modal box tommorow...</span><div id="myModal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>my name is matthew, I will work on the modal box tommorow</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="f">123...</span><div id="myModal5" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>123</p>
</div>
</div></h5></div></div>
答案 0 :(得分：1)
下面的代码是我想要的。我只是将诸如table，table-row和table-cell之类的类添加到了div中。
此外，只想指出，您提供的摘录与链接提供的图片所产生的结果不同。最后，在线上有很多工具可以帮助格式化代码（例如https://www.freeformatter.com/html-formatter.html）。
希望这会有所帮助！
.div {
border-style: solid;
display: table-cell;
border-color: #91b8f7;
vertical-align: top;
}<div style="display:table;">
<div style="display:table-row;">
<div class="div" style="height: 200px; width: 55%">
<div style="float: left; width: 70%">
<div style="display: block;">
<h1 style=" display: inline-block; float: left;">RHT, <span style="padding-left: 20px;">Red Hat Inc</span></h1>
<br><br>
<h1 style="float: left; font-size: 17px;">Red Hat, Inc. develops and provides open source software and services, including the Red Hat Linux operating system. The Companys web site offers information and news about open source software and provides an online community of open source software users and developers.</h1>
</div>
</div>
<div style="float: right; width: 30%">
<h5><br></h5>
<h6 style="text-align: right">1801 Varsity Drive Raleigh, NC 27606 United States</h6>
<h5 style="text-align: right;">11,870 Employees</h5>
</div>
</div>
<div class="div" style="height: 200px; width: 30%">
<div style="float: left; padding-left: 20px;">
<h4 style="line-height: 20px;">Enterprise Value</h4>
<h4 style="line-height: 20px;">Market Cap</h4>
<h4 style="line-height: 20px;">Cash</h4>
<h4 style="line-height: 20px;">Total Debt</h4>
<h4 style="line-height: 20px;">Pref Equity</h4>
<h4 style="line-height: 20px;">Minority Int.</h4>
</div>
<div style="float: right; padding-right: 20px;">
<h4 style="line-height: 20px;">29,583.28</h4>
<h4 style="line-height: 20px;">31,288.21</h4>
<h4 style="line-height: 20px;">2,472.93</h4>
<h4 style="line-height: 20px;">768.00</h4>
<h4 style="line-height: 20px;">0.00</h4>
<h4 style="line-height: 20px;">0.00</h4>
</div>
</div>
<div class="div" style="height: 200px; width: 15%">
<div style="float: left; padding-left: 10px;">
<h4 style="line-height: 20px;">Shares Out</h4>
<h4 style="line-height: 20px;">Float %</h4>
<h4 style="line-height: 20px;">SI</h4>
<h4 style="line-height: 20px;">SI % Float</h4>
<h4 style="line-height: 20px;">Days to Cover</h4>
</div>
<div style="float: right; padding-right: 10px;">
<h4 style="line-height: 20px;">177.1</h4>
<h4 style="line-height: 20px;">99.4%</h4>
<h4 style="line-height: 20px;">5.7</h4>
<h4 style="line-height: 20px;">3.26%</h4>
<h4 style="line-height: 20px;">3.37</h4>
</div>
</div>
</div>
</div>
<!-- new row -->
<div style="display:table;">
<div style="display: table-row;">
<div class="div" style="height: 200px; width: 20%">
<div style="padding-left: 20px;">
<h3>Current Price: <span class="Trsdu(0.3s) Fw(b) Fz(36px) Mb(-4px) D(ib)" data-reactid="35">135.26</span> <span style="color: red"><span class="Trsdu(0.3s) Fw(500) Pstart(10px) Fz(24px) C($dataRed)" data-reactid="36">-1.06 (-0.78%)</span></span></h3>
<h4>Today Date / Time: 07/04/2018 07:09 pm</h4>
<h4>YTD Return: 45.7%</h4>
</div>
</div>
<div class="div" style="height: 200px; width: 11%">
<div style="float: left; padding-left: 10px;">
<h5 style="line-height: 20px;">52 Week Hi/Low</h5>
<h5 style="line-height: 20px;">52 Week Return</h5>
<h5 style="line-height: 20px;">Month Return</h5>
<h5 style="line-height: 20px;">Month Return</h5>
</div>
<div style="float: right; padding-right: 10px;">
<h5 style="line-height: 20px;">88.75</h5>
<h5 style="line-height: 20px;">99.2%</h5>
<h5 style="line-height: 20px;">35.9%</h5>
<h5 style="line-height: 20px;">8.6%</h5>
</div>
</div>
<div class="div" style="height: 200px; width: 10%">
<div style="float: left; padding-left: 20px;">
<h5 style="line-height: 20px;">PE</h5>
<h5 style="line-height: 20px;">EV/EBITDA</h5>
<h5 style="line-height: 20px;">P/S</h5>
<h5 style="line-height: 20px;">P/B</h5>
<h5 style="line-height: 20px;">Div Yield</h5>
<h5 style="line-height: 20px;">Beta</h5>
</div>
<div style="float: right; padding-right: 20px;">
<h5 style="line-height: 20px;">70.2x</h5>
<h5 style="line-height: 20px;">42.8x</h5>
<h5 style="line-height: 20px;">8.9x</h5>
<h5 style="line-height: 20px;">17.8x</h5>
<h5 style="line-height: 20px;">0.0%</h5>
<h5 style="line-height: 20px;">85.2</h5>
</div>
</div>
<div class="div" style="height: 200px; width: 59%">
<div style="float: left; padding-left: 10px;">
<h5 style="line-height: 20px;">Valuation</h5>
<h5 style="line-height: 20px;">Thesis</h5>
<h5 style="line-height: 20px;">Catalysts</h5>
<h5 style="line-height: 20px;">Risks</h5>
<h5 style="line-height: 20px;">Actions</h5>
<h5 style="line-height: 20px;">Current Exp</h5>
</div>
<div style="float: right; padding-right: 10px;">
<h5 style="line-height: 20px;">
<span id="a">Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo m...</span>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. </p>
</div>
</div>
</h5>
<h5 style="line-height: 20px;">
<span id="b">I really like this stock. I really like this stock. I really like this stock. I really like this sto...</span>
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.</p>
</div>
</div>
</h5>
<h5 style="line-height: 20px;">
<span id="c">sdf...</span>
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdf</p>
</div>
</div>
</h5>
<h5 style="line-height: 20px;">
<span id="d">sdfdsf...</span>
<div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdfdsf</p>
</div>
</div>
</h5>
<h5 style="line-height: 20px;">
<span id="e">my name is matthew, I will work on the modal box tommorow...</span>
<div id="myModal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>my name is matthew, I will work on the modal box tommorow</p>
</div>
</div>
</h5>
<h5 style="line-height: 20px;">
<span id="f">123...</span>
<div id="myModal5" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>123</p>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您的代码显示的图片不正确。您应该使用网格系统来生成您想要做的事情的响应更快的版本。至于仅使框内的所有内容都适合，我在.div中添加了{padding：1rem}
.div {
border-style: solid;
display: inline-table;
border-color: #91b8f7;
vertical-align: top;
padding: 1rem;
}<div class="div" style="height: 200px; width: 55%"><div style="float: left; width: 70%"><div style="display: block;"><h1 style=" display: inline-block; float: left;">RHT, <span style="padding-left: 20px;">Red Hat Inc</span></h1><br><br><h1 style="float: left; font-size: 17px;">Red Hat, Inc. develops and provides open source software and services, including the Red Hat Linux operating system. The Companys web site offers information and news about open source software and provides an online community of open source software users and developers.</h1></div></div><div style="float: right; width: 30%"><h5><br></h5><h6 style="text-align: right">1801 Varsity Drive Raleigh, NC 27606 United States</h6><h5 style="text-align: right;">11,870 Employees</h5></div></div><div class="div" style="height: 200px; width: 30%"><div style="float: left; padding-left: 20px;"><h4 style="line-height: 20px;">Enterprise Value</h4><h4 style="line-height: 20px;">Market Cap</h4><h4 style="line-height: 20px;">Cash</h4><h4 style="line-height: 20px;">Total Debt</h4><h4 style="line-height: 20px;">Pref Equity</h4><h4 style="line-height: 20px;">Minority Int.</h4></div><div style="float: right; padding-right: 20px;"><h4 style="line-height: 20px;">29,583.28</h4><h4 style="line-height: 20px;">31,288.21</h4><h4 style="line-height: 20px;">2,472.93</h4><h4 style="line-height: 20px;">768.00</h4><h4 style="line-height: 20px;">0.00</h4><h4 style="line-height: 20px;">0.00</h4></div></div><div class="div" style="height: 200px; width: 15%"><div style="float: left; padding-left: 10px;"><h4 style="line-height: 20px;">Shares Out</h4><h4 style="line-height: 20px;">Float %</h4><h4 style="line-height: 20px;">SI</h4><h4 style="line-height: 20px;">SI % Float</h4><h4 style="line-height: 20px;">Days to Cover</h4></div><div style="float: right; padding-right: 10px;"><h4 style="line-height: 20px;">177.1</h4><h4 style="line-height: 20px;">99.4%</h4><h4 style="line-height: 20px;">5.7</h4><h4 style="line-height: 20px;">3.26%</h4><h4 style="line-height: 20px;">3.37</h4></div></div>
<!-- new row -->
<div class="div" style="height: 200px; width: 20%"><div style="padding-left: 20px;"><h3>Current Price: <span class="Trsdu(0.3s) Fw(b) Fz(36px) Mb(-4px) D(ib)" data-reactid="35">135.26</span> <span style="color: red"><span class="Trsdu(0.3s) Fw(500) Pstart(10px) Fz(24px) C($dataRed)" data-reactid="36">-1.06 (-0.78%)</span></span></h3><h4>Today Date / Time: 07/04/2018 07:09 pm</h4><h4>YTD Return: 45.7%</h4></div></div><div class="div" style="height: 200px; width: 11%"><div style="float: left; padding-left: 10px;"><h5 style="line-height: 20px;">52 Week Hi/Low</h5><h5 style="line-height: 20px;">52 Week Return</h5><h5 style="line-height: 20px;">Month Return</h5><h5 style="line-height: 20px;">Month Return</h5></div><div style="float: right; padding-right: 10px;"><h5 style="line-height: 20px;">88.75</h5><h5 style="line-height: 20px;">99.2%</h5><h5 style="line-height: 20px;">35.9%</h5><h5 style="line-height: 20px;">8.6%</h5></div></div><div class="div" style="height: 200px; width: 10%"><div style="float: left; padding-left: 20px;"><h5 style="line-height: 20px;">PE</h5><h5 style="line-height: 20px;">EV/EBITDA</h5><h5 style="line-height: 20px;">P/S</h5><h5 style="line-height: 20px;">P/B</h5><h5 style="line-height: 20px;">Div Yield</h5><h5 style="line-height: 20px;">Beta</h5></div><div style="float: right; padding-right: 20px;"><h5 style="line-height: 20px;">70.2x</h5><h5 style="line-height: 20px;">42.8x</h5><h5 style="line-height: 20px;">8.9x</h5><h5 style="line-height: 20px;">17.8x</h5><h5 style="line-height: 20px;">0.0%</h5><h5 style="line-height: 20px;">85.2</h5></div></div><div class="div" style="height: 200px; width: 59%"><div style="float: left; padding-left: 10px;"><h5 style="line-height: 20px;">Valuation</h5><h5 style="line-height: 20px;">Thesis</h5><h5 style="line-height: 20px;">Catalysts</h5><h5 style="line-height: 20px;">Risks</h5><h5 style="line-height: 20px;">Actions</h5><h5 style="line-height: 20px;">Current Exp</h5></div><div style="float: right; padding-right: 10px;"><h5 style="line-height: 20px;"><span id="a">Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo m...</span><div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. Helllo my name is bob. </p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="b">I really like this stock. I really like this stock. I really like this stock. I really like this sto...</span><div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock. I really like this stock.</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="c">sdf...</span><div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdf</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="d">sdfdsf...</span><div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>sdfdsf</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="e">my name is matthew, I will work on the modal box tommorow...</span><div id="myModal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>my name is matthew, I will work on the modal box tommorow</p>
</div>
</div></h5><h5 style="line-height: 20px;"><span id="f">123...</span><div id="myModal5" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>123</p>
</div>
</div></h5></div></div>