Web Front-end
HTML Tutorial
How to solve the problem of div covering content but not covering it?_html/css_WEB-ITnose
How to solve the problem of div covering content but not covering it?_html/css_WEB-ITnose
1. In a div layout with a top-down structure, a div may cover a div, but the content is not covered. Take a look at an example
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</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: </head>
13: <body>
14: <div class="boxa">
15: <div class="boxa-l">内容左</div>
16: <div class="boxa-r">内容右</div>
17: </div>
18: <div class="boxb">boxb盒子里的内容</div>
19: </body>
20: </html>
Generally, you need to add ".boxa" and The ".boxb" layout is a top-down structure. From the picture above, we can see in the browser that the content in the two boxes achieves the top-down structure effect, but the DIV ".boxb" goes under ".boxa", but The content is not overwritten, only the DIV is overwritten.
This reason is because the child in the first big box uses the float attribute to float, so ".boxa" is not opened, and the ".boxb" box at the same level is not opened. ".boxa" is close to it, but ".boxa" has no height. The children of ".boxa" are not floating at the same level as ".boxb". The ".boxb" box still thinks that ".boxa" has no height, so " The .boxb" DIV box runs under the ".boxa" sub-level DIV box, forming an overlapping phenomenon.
There are three ways to solve 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" style="height:81px;">
2. Clear the float
Add clear style before closing the ".boxa" box
1: //css
2: .clear{ clear:both}3:
4: //修改boxa
5: <div class="boxa">
6: <div class="boxa-l">内容左</div>
7: <div class="boxa-r">内容右</div>
8: <div class="clear"></div>
9: </div>
Or clear on boxb Float
1: <div class="boxb" style="clear:both">boxb盒子里的内容</div>
3. Add overflow:hidden to ".boxa"
1: <div class="boxa" style="overflow:hidden">
2: <div class="boxa-l">内容左</div>
3: <div class="boxa-r">内容右</div>
4: </div>
2. Two adjacent DIVs overlap and cover
This problem is generally caused by two adjacent DIVs, one floating and the other not. Use float to create two DIVs that overlap.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>DIV与DIV覆盖</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: </head>
11: <body>
12: <div class="bb">我是bb里内容</div>
13: <div class="cc">我是dd里内容</div>
14: </body>
15: </html>
As can be seen from the above picture or browser test case, the ".bb" corresponding DIV box is floating and covered in the ".cc" corresponding DIV above the box, but the content is not covered. This is because the DIV box corresponding to ".bb" uses floating, and the DIV box corresponding to ".cc" at the same level does not use floating. Using floating on one does not cause the DIV to not be on the same "plane" ", but the content will not be overwritten, only the DIV will be overwritten.
Solution:
1. Do not use float, remove the float in .bb, the effect is as follows
2. Use both For floating, add float:left to .cc, the effect is as follows
3. Set the margin style for DIVs that do not use float floating. Add margin:100px to .cc, the effect is as follows
Source: http://www.ido321.com/669.html
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1665
14
1424
52
1322
25
1269
29
1249
24
Solution to the problem that Win11 system cannot install Chinese language pack
Mar 09, 2024 am 09:48 AM
Solution to the problem that Win11 system cannot install Chinese language pack With the launch of Windows 11 system, many users began to upgrade their operating system to experience new functions and interfaces. However, some users found that they were unable to install the Chinese language pack after upgrading, which troubled their experience. In this article, we will discuss the reasons why Win11 system cannot install the Chinese language pack and provide some solutions to help users solve this problem. Cause Analysis First, let us analyze the inability of Win11 system to
Five tips to teach you how to solve the problem of Black Shark phone not turning on!
Mar 24, 2024 pm 12:27 PM
As smartphone technology continues to develop, mobile phones play an increasingly important role in our daily lives. As a flagship phone focusing on gaming performance, the Black Shark phone is highly favored by players. However, sometimes we also face the situation that the Black Shark phone cannot be turned on. At this time, we need to take some measures to solve this problem. Next, let us share five tips to teach you how to solve the problem of Black Shark phone not turning on: Step 1: Check the battery power. First, make sure your Black Shark phone has enough power. It may be because the phone battery is exhausted
How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting?
Mar 22, 2024 am 08:06 AM
With the continuous development of social media, Xiaohongshu has become a platform for more and more young people to share their lives and discover beautiful things. Many users are troubled by auto-save issues when posting images. So, how to solve this problem? 1. How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? 1. Clear the cache First, we can try to clear the cache data of Xiaohongshu. The steps are as follows: (1) Open Xiaohongshu and click the "My" button in the lower right corner; (2) On the personal center page, find "Settings" and click it; (3) Scroll down and find the "Clear Cache" option. Click OK. After clearing the cache, re-enter Xiaohongshu and try to post pictures to see if the automatic saving problem is solved. 2. Update the Xiaohongshu version to ensure that your Xiaohongshu
The driver cannot be loaded on this device. How to solve it? (Personally tested and valid)
Mar 14, 2024 pm 09:00 PM
Everyone knows that if the computer cannot load the driver, the device may not work properly or interact with the computer correctly. So how do we solve the problem when a prompt box pops up on the computer that the driver cannot be loaded on this device? The editor below will teach you two ways to easily solve the problem. Unable to load the driver on this device Solution 1. Search for "Kernel Isolation" in the Start menu. 2. Turn off Memory Integrity, and it will prompt "Memory Integrity has been turned off. Your device may be vulnerable." Click behind to ignore it, and it will not affect the use. 3. The problem can be solved after restarting the machine.
How to solve the problem of default gateway automatically disappearing
Feb 24, 2024 pm 04:18 PM
How to solve the problem that the default gateway disappears automatically. In modern society, the Internet has become an indispensable part of people's lives. Whether for work or entertainment, we all need stable network connections to complete various tasks. The default gateway is one of the key elements connecting the local network to the external Internet. However, sometimes we may encounter the problem that the default gateway disappears automatically, resulting in the inability to access the Internet. So, how should we solve this problem when the default gateway disappears? First, we should clarify the concept of default gateway. The default gateway is a network route
How to solve the problem that Huawei browser has stopped accessing this webpage
Feb 26, 2024 pm 01:28 PM
How to solve the problem that Huawei browser has stopped accessing this webpage? When using Huawei mobile browser to access certain websites, a prompt indicating that access is prohibited may appear, preventing users from browsing related content normally. This is very inconvenient for users. So, what should we do when we encounter a situation where access to the Huawei mobile browser website is prohibited? The editor below will provide you with solutions to the problem of prohibiting access to Huawei browser websites. I hope it will be helpful to you. Solution to the prohibition of access to the Huawei Browser website 1. After opening the Huawei mobile browser, click the three-dot icon below, and then click Settings. 2. After entering the settings, click [Security and Privacy] 3. Turn off the switch on the right side of [Safe Browsing] to remove website access restrictions. The above is the solution to the ban on Huawei browser website access.
Interpreting Oracle error 3114: causes and solutions
Mar 08, 2024 pm 03:42 PM
Title: Analysis of Oracle Error 3114: Causes and Solutions When using Oracle database, you often encounter various error codes, among which error 3114 is a relatively common one. This error generally involves database link problems, which may cause exceptions when accessing the database. This article will interpret Oracle error 3114, discuss its causes, and give specific methods to solve the error and related code examples. 1. Definition of error 3114 Oracle error 3114 pass
How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation
Mar 04, 2024 pm 01:50 PM
How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "
