Six ways to arrange elements horizontally

As we all know, block-level elements are arranged vertically by default, and inline elements are arranged horizontally. Block-level elements are basically used in layout, such as div and other common block-level tags. So how can block-level elements also be arranged? What about horizontal arrangement? This article introduces six ways to achieve horizontal arrangement of block-level elements.

First type: display: inline-block

First of all, you must understand block elements and inline elements

Block-level elements: Block-level elements include width height, padding, border and margin. They are arranged from top to bottom. Common block-level elements include div, p, form, ul, etc.

Inline elements: The height and width are determined by the content. They cannot set a fixed size. There are no vertical margins and padding. The arrangement is horizontal. Inline elements account for the majority of all HTML elements. For example, a, span, label, button, img, input...

Some people may have questions here, "Button, img and input labels can set width and height, as well as margin and padding. , why is it really an inline element?" In fact, there are two main ways to divide html elements, namely "block-level elements and inline elements", and "replaceable elements and non-replaceable elements". The first division method is introduced above, and the second division method is introduced below:

Replacement elements: The popular understanding is elements with width and height attributes. Replacement elements are similar to display:inline-block elements. You can set the height, width, and inner and outer margins. They mainly include img, input, textarea, select, object, audio, and canvas. In some specific cases, they are replacement elements.

Non-replaceable elements: Except for replacement elements, the rest are non-replaceable elements (O(∩_∩)O)

After a lot of nonsense, we know that display: inline-block can Let the elements be arranged horizontally, but there may be a little problem with this layout. For example:

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>
<div class = "div1">左边</div>
<div class = "div2">右边</div>

This is where we found a gap between the two divs. Why is this?

The browser will treat newlines, indents, and spaces as one space. Even if there are two spaces, or a newline plus a space, etc., they will be parsed into one space. The size of this space is font-size/2. There are many ways to remove this gap.

1. Set the margin-left of div2:-font-size/2

2. Set the font-size of the parent tags of the two divs: 0

3. Set negative word-spacing

Second: float: left/right

The float attribute can make the element break away from the regular document flow, along the left side of the container or Arrange horizontally on the right.

This method can be said to be the most used, but there is a problem. In adaptive layout, the height and width of elements are generally not fixed, and will be automatically adjusted according to the content size. This is if the child elements are all If it is a floating element, there will be a high degree of collapse.

Example of chestnuts

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>
<div>
    <span class = "box1">左边</span>
    <span class = "box2">右边</span>
</div>

Here, the sub-element div in the previous chestnut is deliberately changed to span. In fact, I want to express that float can implicitly convert elements into block elements (position:absolute/ fixed (also available), so the width and height can be set naturally.

So what are the problems after the boxes are arranged horizontally? That's right! The height of the parent container is collapsed. At this time, the height of the parent container div is 0, because the floating element will break away from the regular document flow, and its parent container will ignore it when calculating the height. This is what we don't want to see, because if there are other regular flow tags behind this highly collapsed DIV, the page will be messed up and other undesirable results will occur.

The solution is naturally to clear floats. There are two main ways to clear floats:

1.clear:left/right/both, which is specially used to clear floating CSS.

2.BFC, because BFC has a rule "When calculating the height of BFC, floating elements also participate in the calculation."

Let’s talk about several methods of clearing floats with clear:

1. Add an empty tag after the last child element, and then set its style clear: both.

2. In the last floating child element, use the pseudo element::after to add a clear style to clear the float

The third type: table layout

This layout method is not commonly used because it has various problems.

The rendering speed is slow

Increases the amount of HTML code and is difficult to maintain

The name of the tag does not conform to the semantics of HTML. Table is originally used for tables, and it is not even used for layout. Is it inappropriate?

The tag structure is relatively rigid, and the cost of later modification is higher

, etc. I won’t elaborate too much here. In short, try to use table layout

The fourth method: absolute positioning

This method is also used more in daily development. As mentioned earlier, float can make elements detach. For regular document flow, position:absolute/fixed here also has the same effect. The processing method has been mentioned in float layout, so you can just move it here.

Here I want to talk about position:absolute absolute positioning. Positioning is based on its first parent and is a statically positioned element such as position:absolute/relative/fixed. If it cannot be found, use The root element is used as the base for positioning. Generally, the parent element position:ralative is used in combination with the child element position:absolute.

The fifth type: css3 flexible layout

弹性布局因为其兼容性所以还没有得到广泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器一样，早晚都会干败flash，只是时间问题！！！

第六种：transform:translate

CSS3中用于动画的一个样式，但是他可是让两个元素横向排列，这里不多说直接上代码，请用谷歌浏览器运行一下：

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>
<div>
    <div class = "box1">左边</div>
    <div class = "box2">右边</div>
</div>

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式，其实每种方式都有很多大学问，我解释描述了冰山一角，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

The above is the detailed content of Six ways to arrange elements horizontally. For more information, please follow other related articles on the PHP Chinese website!