时间戳

首页 > 解决方案 > 为什么我放大时我的 div 元素会分散？

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

问题描述

这是我的代码：当我不放大时，它看起来像这样： 常规

但是，当我放大时，不是像上面那样看起来像一个大矩形，而是看起来像许多小矩形 缩放
有人可以帮我做吗，所以当我放大时，它看起来一样，只是更小？谢谢！

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

标签： htmlcss

解决方案

下面的代码是我认为你想要的。我只是在你的 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>

推荐阅读