Home > Developer > JavaScript
How can we solve the problem that div content is not covered ?, Div Overwrite
1. In the div layout of the upper and lower structures, the div may overwrite the div, but the content is not covered. Let's look at an example.
1: <!DOCTYPE html>
2:3:4: <title> DIV and DIV overwrite </title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: <style>7: .boxa,.boxb{ margin:0 auto; width:400px;}8: .boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}9: .boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}10: .boxb{ border:1px solid #000; height:40px; background:#999}11: </style>12:13: <body>14: <div class="boxa">15: <div class = "boxa-l"> left content </div>16: <div class = "boxa-r"> right content </div>17: </div>18: <div class = "boxb"> contents in the boxb box </div>19: </body>20:Generally, boxa and. boxb "layout is the upper and lower structure. As shown in the browser, the effect is that the content in the two boxes achieves the upper and lower structure effect, but". boxb "The DIV ran to". "boxa" goes down, but the content is not overwritten, and only the DIV is overwritten.
This is because the sub-level in the first large box uses the floating float attribute, resulting in ". boxa "is not supported, but at the same level". boxb "box and". boxa "closely followed, while". boxa "no height,". boxa "Sub-Level floating and". boxb "is not the same level,". boxb "box still thinks". boxa "is not high, so it causes". boxb "DIV box to". boxa "subdiv boxes form overlay and overlap.
There are three solutions to the problem:
1. Add a height attribute to boxa. The value of height must be greater than or equal to the height of baxa-l.
1: <div class="boxa"> 1: //css2: .clear{ clear:both}3:4: // modify boxa5: <div class="boxa">6: <div class = "boxa-l"> left content </div>7: <div class = "boxa-r"> right content </div>8: <div class="clear"></div>9: </div>Or clear the float on boxb.
1: <div class = "boxb"> 1: <div class = "boxa"> 2: <div class = "boxa-l"> content left </div>3: <div class = "boxa-r"> right content </div>4: </div>
2. overlapping coverage of two adjacent DIV
This problem is generally caused by the overlap of two adjacent divs when one is floating and the other is not floating.
1: <!DOCTYPE html>2:3:4: <title> DIV and DIV overwrite </title>5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />6: <style>7: .bb{ float:left; border:1px solid #333; background:#FFF;height:50px;}8: .cc{ border:1px solid #F00;background:#CCC; height:80px}9: </style>10:11: <body>12: <div class = "bb"> I am from bb </div>13: <div class = "cc"> I am in dd </div>14: </body>15:From the test case of the browser, we can see that ". bb "corresponds to the DIV box floating covered in". cc corresponds to the above DIV box, but the content is not covered, this is because ". bb "corresponds to the DIV box used for floating, and the same level". the DIV box corresponding to cc does not use float. One DIV is not on the same "plane" because it is not floating, but the content is not overwritten. Only the DIV is covered.
Solution:
1. Do not use float. Remove float from. bb. The effect is as follows:
2. Use float to add float: left to. cc. The effect is as follows:
3. Set the margin style for the DIV that does not use float floating. Add margin: 100px to. cc. The effect is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
