Display: Inline-Block in css

Inline-block, which is hard to understand and has attractive display methods, is only a lot of promises, but little to be fulfilled. I have received such PSD files many times:

After reading it, I began to cry.

This type of layout is usually a piece of cake. Fixed width, fixed height, left floating ( Float: left. However, this design needs to work with a variable amount of content, that is, if one of these blocks has more content than the other, it will destroy the entire layout:

Because the first gallery project is higher than other projects, the fifth project floats on the left side of it rather than under it. In general, we want a layout with the same scalability as a table, but what is really appropriate is a semantic tag.

We have an unordered list and DisplaySet Inline-blockStart with a simple page:

<Ul> <li> 

In Firefox 3, Safari 3, and Opera, it looks OK:

Obviously, vertical alignment is a bit problematic. Well, this is not really a problem because it is the right action, but it is not what we want.

What happens here is that every<Li>The baseline is a parent element.<Ul>. What is baseline? Figure 1:

Baseline is the black line that passes through the above text. The default vertical alignment value of an inline or inline-block element is baseline. That is to say, the baseline of an element is aligned with the baseline of its parent element. This is the first line block including the baseline:

You can see that each baseline is aligned with the baseline of the text "This is the baseline. The text is not in<Li>It is only a parent element.<Ul>Is a simple text node used to identify the baseline of the parent element.

However, the solution to this problem is simple:Vertical-align: topThe effect is a nice grid:

Except that it still does not work in Firefox 2, IE 6, and 7.

Let's start processing Firefox 2.

Firefox 2 does not support intra-row blocks, but it supports the same display effect as intra-row blocks, which is unique to Mozilla.-Moz-inline-stack. When we add itDisplay: inline-blockPreviously, FF2 will ignore the statement (note:Display: inline-block) And keep-Moz-inline-stackBecause it does not support intra-row blocks. Browsers that support intra-row blocks will use it:Display: inline-blockAnd ignore the previous Display attribute (note:-Moz-inline-stack).

<Style> li {width: 200px; min-height: 250px; border: 1px solid #000; display:-moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px ;}</style>

Unfortunately, it has a small bug:

Honestly, I don't know what caused this bug. But there is a quick solution here. Set<Li>All content in<Div>.

<Li> <div> 

It seems thatResetNow<Li>And then display them properly.

Now let's look at IE7. IE7 does not support intra-row blocks, but we can use tricks to render them.<Li>As if they are intra-row blocks. What should I do? HasLayout is an IE magic attribute created for all fun. You cannotHasLayout: true;Or explicitly set an element in any form similar to thisHasLayoutBut you can use other statements suchZoom: 1To trigger it.

Technically speaking,HasLayoutThis means thatHasLayoutThe elements are responsible for rendering themselves and their child elements (pass them throughMin-heightAndWidthAttribute combination, and then you getDisplay: blockSimilar behavior ). Like the magic fairy dust, you can scatter them on rendering issues, and these problems will disappear.

When we<Li>Add to elementZoom: 1And* Display: inline(Star hack to target IE6 & 7).Inline-blockTo display them:

<Style> li {width: 200px; min-height: 250px; border: 1px solid #000; display:-moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; * display: inline;} </style>

Call! (Translator's note: Just relax. IE 6 is left:

Not supported by IE 6Min-heightBut I am very grateful (Translator's note: irony) for itsHeightAttribute is not correctly processed, so we can use it instead. Set_ Height(IE6 underscore hack) a value of 250px will make all<Li>The height of the elements is 250px, and if the content exceeds this value, they will be expanded for adaptation. All other browsers will ignore_ Height.

After all the efforts, this is the final CSS and HTML:

    
 
     

      

       
The code is as follows:
       
Copy code
 
      
 
      

       
<Style> li {width: 200px; min-height: 250px; border: 1px solid #000; display:-moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; * display: inline; _ height: 250px ;} </style> <li> <div>