CSS--overflow:hidden in project examples
|
Here are some examples of how I use this property in my projects: (1) Violently clear floating Copy code The code is as follows:<style type="text/css"> .wrap {overflow: hidden;zoom:1;background-color: #ccc;} .wrap p {float: left;} </style> Copy code The code is as follows:<div class="wrap"> <p>test of css</p> </div> (2) Prevent margins from collapsing Copy code The code is as follows:<style type="text/css"> body,p {padding: 0;margin: 0;} .wrap {overflow: hidden;zoom:1;background-color: #ccc;} .wrap p {margin-top: 20px;} </style> <div class="wrap"> <p>test of css</p> </div> (3) In IE-6, solve the problem of defining 1px high block elements Copy code The code is as follows:<style type="text/css"> .line {height: 1px;background-color: #ccc;overflow: hidden;} </style> <div class="line"></div> (4) Create a two-column layout Copy code The code is as follows:<style type="text/css"> div {height: 500px;} .left {float: left;background-color: #000;width: 200px;margin-right: 5px;} .right {overflow: hidden;zoom:1;background-color: #ccc;} </style> <div class="left"></div> <div class="right"></div> |
<<: Mysql practical exercises simple library management system
>>: Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker
Recommend
CnBlogs custom blog style sharing
After spending half the night on it, I finally ma...
Vue realizes the function of book shopping cart
This article example shares the specific code of ...
Simple summary of tomcat performance optimization methods
Tomcat itself optimization Tomcat Memory Optimiza...
How to use html2canvas to convert HTML code into images
Convert code to image using html2canvas is a very...
Methods and problems encountered in installing mariadb in centos under mysql
Delete the previously installed mariadb 1. Use rp...
Docker View Process, Memory, and Cup Consumption
Docker view process, memory, cup consumption Star...
After Apache is installed, the service cannot be started (error code 1 appears when starting the service)
Table of contents 1. Error message 2. Cause of er...
Tomcat first deployment web project process diagram
Put your own web project in the webapps directory...
CSS position fixed left and right double positioning implementation code
CSS Position The position attribute specifies the...
Mount the disk in a directory under Ubuntu 18.04
Introduction This article records how to mount a ...
Example of how rem is adapted for mobile devices
Preface Review and summary of mobile terminal rem...
How to configure the pdflatex environment in docker
Technical Background Latex is an indispensable to...
Implementing parameter jump function in Vue project
Page Description: Main page: name —> shisheng...
Manually install mysql5.7.10 on Ubuntu
This tutorial shares the process of manually inst...