Static page production: 8HTML floating Maneuvers concept (bedding two: Picture and text mixed row)

Now let's say a second cushion.

The second cushion is called the picture and text mix. What is a picture and text mix, this thing we need to take some time to analyze. First Look at:

This is actually an example, but this is a very common example when we browse the Web, or look at tweets, blogs and other articles. This has the content, has the picture and is in the area again, this kind of situation we are called the text mixed row.

Now that the text is mixed, we have already touched the word, but the picture how to do not say. Let's talk about how to do this picture right now. If you want to have a picture in the browser, then you need to add a , in fact, the whole spell is the image, the meaning of the picture. IMG is a single-label, it is the inline element, if only to write a single label actually has no actual meaning. Because the browser doesn't know that you're going to show that picture. So we need to add a src attribute to img, and SRC is actually the abbreviation for source, which refers to the source. This property allows you to specify where the source of the picture is.

Here we can This reference, you can put the picture in the browser, then about the image of the relevant knowledge, we said this, we are in detail in the following.

When we write a piece of text in the P tag, we achieve an effect. Since the P tag is a block element, it's not going to be a row with the picture, let alone mixing it together. According to what we are learning now, we want to achieve the effect of mixing in one piece, that is, adding a style to the P tag.

When we add a style to the P tag, the text is arranged according to the baseline, which is the bottom part of the picture, so the text will be arranged from the bottom when it is written. Does not begin writing from the top of the picture. Then we might think of a method in which we used a called vertical-aling:top.

Because the picture he is a line element, so anyway he can only and a line of text put together, you want to with more lines in a piece of display, that is impossible, if so the picture is not inline element, the line element can only be displayed in one line, then the other text must be shown below the bottom of the picture, This effect is not what we want.

We need a real picture-and-text mix, and the images can't be confined to a single line, but we need to follow the block and inline principles.

Then we need to open up a new battlefield!

So open up what heart battlefield is we need to solve a problem, we need to look at the three-dimensional perspective, in fact, we have just seen the effect of all three-dimensional knowledge of the first layer.

But the three-dimensional layer, and can not meet our requirements, then we need to like a method, what method, is to let this picture on the basis of the text floating up, we look at the effect.

Let the picture not be limited by a layer of line, let the picture float up. After the float, we found that the first layer left an empty block.

We use Crimson to mark out this part of the empty block, so what happens when there is an empty block, two things happen here.

The first thing is that the block element fills the blank.

The second thing is that the inline elements walk around the bounding rectangle of the floating element.

We have explained these two things. First we say the block element fills the empty block. What kind of effect would that be?

found that the background of the green P tag is filled with the picture left in the empty block. Then the second thing is that the inline element surrounds the floating element border. This seems a little bit too good to understand, we're here to explain. You may think that at this time the picture has floated up, then the P tag only needs to occupy the entire line is good, that has what inside the line element surrounds the floating element border ah. Let's think about what I said before. The P tag is a block element, but the text is a row element. So what we're saying is that the inline elements surround the floating element, meaning that the text in the picture wraps around the area of the image. It becomes this way.

In fact, this effect is what we want, here we write less text. If you write a few more lines, it will be arranged around the picture. such as this!

From a plane point of view, this is what we need the picture and text mixed. Here we collate the knowledge points that we have covered in this lesson.

This section covers two main areas:

1. We say that words are the elements of the line. So the content in the tag, the pass belongs to the type of text. Then tags and text are actually nested relationships.

2. We understand the picture and text mix, because the image is the element in the line, when the picture and text mixed together, only the top of the picture has text, of course, here we used vertical-align:top; If we want to reach the line of text elements around the floating elements, we need to float the picture, vacated by the elements of the line filled with the element, you can achieve the real meaning of the text mixed.

The above is the main part of our section, and the next section we will apply floating maneuvers to the code.

Static page production: 8HTML floating Maneuvers concept (bedding two: Picture and text mixed row)