放大时

放大时

关注
发信
关注(28)粉丝(399)

html - 为什么放大时div元素会分散？

这是我的代码：
当我不放大时，它看起来像这样：
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>

最佳答案

下面的代码是我想你想要的。我只是向您的div添加了诸如table，table-row和table-cell之类的类。

另外，只想指出，您提供的代码段所产生的结果与链接所提供的图像所产生的结果不同。最后，在线上有很多工具可以帮助格式化代码（例如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>

09-12 21:18
Powered by LMLPHP ©2024 放大时 0.026055