Transferred from:
Http://blog.csdn.net/xiongyuefei/archive/2008/10/17/3093033.aspx
We often encounter a container with a border, the border height changes with the container height, but when the container inside the border is set with the floating attribute, the outer box does not follow the change, then you need to clear the floating. Adding the overflow: auto attribute to the outer border container can solve the floating clearance problem in IE7 and FF, but IE6 does not take effect, we need to use a private attribute zoom of IE to make IE5.5 + browsers achieve the effect that the external box follows the change.
Several details need to be paid attention to, for example, we create a text-style container with a width of 200 pixels, a highly adaptive, and a 10-pixel outer frame with a style of content. (1)
Figure 1
The Code is as follows:
The following is a reference clip:
<style type="text/css">.content{ border:10px solid #F00;}.text{ width:200px; height:300px; background:#000;}</style><body bgcolor="#FFFFFF"><div class="content"> <div class="text"></div></div></body>
If we set the left floating attribute for the text container and define the 200 pixel width for the content container, we need to add the overflow: auto attribute for the content container, to clear the floating of the text container. Otherwise, problems may occur in FF. (2)
Figure 2
The Code is as follows:
The following is a reference clip:
<style type="text/css">.content{ border:10px solid #F00; width:200px; overflow:auto;}.text{ width:200px; height:300px; background:#000; float:left;}</style><body bgcolor="#FFFFFF"><div class="content"> <div class="text"></div></div></body>
There is also a special case. If you only use overflow: auto without setting the content width, you cannot clear the floating effect in IE5.5 +. Therefore, we need to use the private attribute zoom of IE to achieve the desired effect in IE.
The Code is as follows:
The following is a reference clip:
<style type="text/css">.content{ border:10px solid #F00; overflow:auto; zoom:1;}.text{ width:200px; height:300px; background:#000; float:left;}</style><body bgcolor="#FFFFFF"><div class="content"> <div class="text"></div></div></body>
Simulate an image heat zone using a link Style
If you add a region link to an irregular image, many friends will consider using the Dreamweaver hot zone function. In fact, if you want to add a region with a regular rectangle, we can use the style sheet to control the link style to simulate the effect of the hot zone, with less code and ease of maintenance and modification.
For example, we want to create a 400x50 and 100x80 rectangular heat zone on a 100x200 background image. (3)
Figure 3
The Code is as follows:
The following is a reference clip:
<style type="text/css">#banner{ width:400px; height:100px; background:#959595;}#banner a{ float:left;}#banner a.link1{ width:100px; height:50px; background:#F00; margin:20px 0 0 20px;}#banner a.link2{ width:200px; height:80px; background:#F00; margin:10px 0 0 50px;}</style><body bgcolor="#FFFFFF"><div id="banner"> <a href="#" class="link1"></a> <a href="#" class="link2"></a></div></body>
By changing the link to block attributes, you can easily define the heat area of a rectangle and control the position of each area by style. The code is clear and easy to modify.
Use the list to automatically update and arrange the Image Layout
Image formatting is often used when creating image sites, and the latest images are displayed at the beginning, and so on. Using a table can achieve this effect, but it is a little complicated. Let's share the effect of using the list below.
The image size is 100x80 pixels, with three rows in each row. (4)
Figure 4
The Code is as follows:
The following is a reference clip:
<style type="text/css">ul{ margin:0; padding:0 0 20px 0; list-style:none; width:380px; overflow:auto; background:#959595;}ul li{ float:left; display:inline; width:100px; height:80px; background:#F00; margin:20px 0 0 20px;}</style><body bgcolor="#FFFFFF"><ul> <li>4</li> <li>3</li> <li>2</li> <li>1</li></ul></body>
In this way, you can automatically update the layout of an image by adding a row list. Note the following two points:
1. As described in the first example, <li> floating attributes are used, so <ul> overflow: auto is used to clear floating;
II. In the sample code, <li> uses the display: inline attribute to solve the left floating double margin bug in IE6. I hope you will pay attention to this tip.
Note: The preceding example is successfully tested in IE6, IE7, and FireFox browsers.
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
