Question

最小化窗口时，两个<div>元素重叠我该如何解决？

＆＃13;

#pageName {
  text-align: center;
  text-decoration: underline;
}
#toAddress {
  float: left;
  margin-left: 20px;
}
#fromAddress {
  float: right;
  margin-right: 100px;
}
#from {
  vertical-align: top;
  padding-top: 10px;
  padding-right: 5px;
}
#des {
  width: 730px;
  margin-top: 80px;
  margin-left: 20px;
  position: fixed;
  font-style: italic;
}
#mainContent {
  margin-top: 200px;
  margin-left: 20px;
}
#tblContent {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
  margin-top: 20px;
}
#tblContent td,
#tblContent th {
  border: 1px solid black;
  text-align: center;
}

＆＃13;

<div id="pageName">
  URGENT REQUEST FOR SECURITY CHECK
</div>
<div id="toAddress">
  <table>
    <tr>
      <td>To:</td>
      <td id="toName">ABBEY NATIONAL PLC</td>
    </tr>
    <tr>
      <td>Fax:</td>
      <td id="toFax">Uknown</td>
    </tr>
    <tr>
      <td>Date:</td>
      <td>04 Jun 2001 10:30:21</td>
    </tr>
  </table>
</div>
<div id="fromAddress">
  <table>
    <tr>
      <td id="from">From:</td>
      <td>
        <table>
          <tr>
            <td>Acquirung Bank</td>
          </tr>
          <tr>
            <td>Risk Management</td>
          </tr>
          <tr>
            <td>100 Bond Street</td>
          </tr>
          <tr>
            <td>London</td>
          </tr>
          <tr>
            <td>W1</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>Fax:</td>
      <td id="fromFax">0207 234567890/</td>
    </tr>
    <tr>
      <td>Tel:</td>
      <td id="fromTel">0207 123456789/</td>
    </tr>
  </table>
</div>

<div id="des">
  The transaction/authorization detailed below, have been identified by RiskNet as suspicious activity for the merchant. Could you please check the status of the cards and if the values are not normal spending, could you please contact the cardholder to
  verify the transaction.
  <br />Test
</div>

<div id="mainContent">
  <span id="text">
            Please fax a response by return
        </span>

  <table id="tblContent">
    <thead>
      <tr>
        <th>Cardholder Number</th>
        <th>Ccy</th>
        <th>Amount</th>
        <th>Trans Date</th>
        <th>Type</th>
        <th>Our Reference</th>
        <th>MCC</th>
        <th>Retailer NameTown</th>
        <th>Normal</br>Spending?</th>
        <th>Cardholder</br>Contacted</th>
        <th>Response</th>
        <th>Does Customer</br>Have Card?</th>
        <th>Goods</br>Recieved?</th>
      </tr>
    </thead>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>125.78</td>
      <td>24 May 2001</td>
      <td>D</td>
      <td>1254151822928</td>
      <td>3391</td>
      <td>PICK N MIX, MANCHETER</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>27.60</td>
      <td>23 May 2001</td>
      <td>D</td>
      <td>1254151822929</td>
      <td>3391</td>
      <td>PICK N MIX, MANCHETER</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>435.70</td>
      <td>22 May 2001</td>
      <td>D</td>
      <td>100131014426</td>
      <td>5193</td>
      <td>MECHANICS ANONYMOUS, LONDON</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>72.16</td>
      <td>21 May 2001</td>
      <td>D</td>
      <td>100131014427</td>
      <td>5193</td>
      <td>MECHANICS ANONYMOUS, LONDON</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>259.75</td>
      <td>21 May 2001</td>
      <td>D</td>
      <td>1254151822930</td>
      <td>3391</td>
      <td>PICK N MIX, MANCHETER</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>509.84</td>
      <td>24 May 2001</td>
      <td>D</td>
      <td>1254151822931</td>
      <td>3391</td>
      <td>PICK N MIX, MANCHETER</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
    <tr>
      <td>1234567890123451</td>
      <td>GBP</td>
      <td>46.43</td>
      <td>24 May 2001</td>
      <td>D</td>
      <td>1254151822932</td>
      <td>3391</td>
      <td>PICK N MIX, MANCHETER</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
      <td>Genuine/Fraud</td>
      <td>YES/NO</td>
      <td>YES/NO</td>
    </tr>
  </table>
</div>

＆＃13;

View on CodePen

Answer 1

这样做的一种方法是防止窗口变小并允许重叠。

您可以添加以下CSS：

List<T>

请参阅CodePen fork。

Answer 2

你应该做的是为这些#toAdress和#fromAdress DIV创建一个父DIV，并将这个小clearfix用于这个新创建的父div。这是浮动项目的一个非常常见的问题......所以它可能看起来像

<div class="cf">
    <div id="toAdress">... your content ...</div>
    <div id="fromAdress">... your content ...</div>
</div>

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

如何修复重叠的div元素？

2 个答案: