CSS implementations prevent page layouts from being corrupted by large size pictures and long strings

Source: Internet
Author: User
Tags define
css| Page | string

Use table and div to do page layout design, encounter large size pictures and long English string, layout defined in the size will be destroyed, resulting in page layout deformation.

Is there any way to solve it?

The CSS attribute Overflow:hidden can be controlled so that the outside part is automatically hidden, so the bad thing is that this part of the information display is not complete, such as the picture shows only a part. But the page layout is not messy.

It is important to note that when using overflow, you must define width, percentages, or specific values.

In the use of Div to do page layout, you can define a large layout, such as in the left column, right column, in the column inside, can also be specific to the page of a layout element.

In the use of UL and Li do picture list arrangement, you can also use this, so as to avoid some large size map mess layout, you can also solve the browser window narrowing, Li elements automatically back row alignment error problem.

BTW: With Overflow:auto, but also in the page to imitate the effect of the IFRAME, back to write

No use of overflow:hidden<br/>
<div style= "Width:200px;background:green;color: #fff;p adding:8px" >
Here's a picture with a width greater than 200px! <br/>

Using the overflow:hidden<br/>
<div style= "Overflow:hidden;width:200px;background:green;color: #fff;p adding:8px" > here also put the picture to compare the effect Ah! <br/>


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.