Float examples and plc programming examples

Source: Internet
Author: User

Float examples and plc programming examples
Float instance description

Float is a powerful attribute. In the actual front-end development process, people often use it for layout. However, sometimes, it is difficult to use it.

For example, now we want to implement a two-column layout, with the left column fixed in width, and the right column automatically expanded in width.

See:

Idea: Use div + float, div1 as the column on the left, div2 as the column on the right, set the width of div1 to a fixed width, and set it to a left floating, out of the document stream; div2 is OK in the normal stream.

For more information about the code, see:

<! DOCTYPE html>

At first glance, it is true that when you manually change the browser width, the div1 width is fixed, and the div2 width is also adaptive.

But what if I add some content to div2?

For example, use a blue div with a width of PX as a sub-element of div2. Let's take a look at the effect.

Depend on me. Isn't that the same as above? What about my blue div ?!!

Open the chrome debugger to see what is going on

I originally wrote div3 in the Document Stream, but it was blocked by div1.

How can this happen?

This is because the floating element is out of the Document Stream, that is, div2 thinks that div1 is not in the Document Stream, so div2 will ignore the existence of div1 and present itself, but after div1 is floating, it is at the upper layer of the Document Stream, so div1 will cover the normal document stream below it.

Then how can we make div3 display in visible div2?

As shown in.

 

If the above effect is displayed, you can set the display of div3 to inline-block. Don't believe it. Try running the code yourself.

Below is the modified Code

<! DOCTYPE html> Why?

This is because the initial purpose of float is to enable text to enclose floating elements and inline elements to enclose floating elements.

Therefore, if you remove div3 and replace it with a large amount of text (enough to enclose div1), set div2 to a higher height than div1, and manually change the browser width gradually, you will find that the text is surrounded by div1.

See

<! DOCTYPE html>  

What if I want to add block-level elements to div2? That is to say, I want div1 and div2 to be two modules that do not interfere with each other. When adding content to the module, there is no impact. What should I do?

We can use margin or padding. Set the margin-left or padding-left of div2 (Adaptive width) to the div1 (fixed width) size. Here I am setting margin-left.

<! DOCTYPE html> Well, it's now today. I wish you a happy Valentine's Day tomorrow ~

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.