How to make boxes appear side by side in css-CSS Tutorial-php.cn

How to make boxes appear side by side in css

醉折花枝作酒筹

Release： 2023-01-05 16:10:39

Original

19978 people have browsed it

How to display boxes side by side: 1. Use the float attribute to set side-by-side display. You only need to set "float:right|left;" to the div; 2. Use the display attribute to set the side-by-side display. You only need to set the div to display side by side. Just set "display:inline;".

How to make boxes appear side by side in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Let’s first set up three div box objects without setting any css styles to see the effect. The code is as follows:

<body>
    <div>第一个盒子</div>
    <div>第二个盒子</div>
    <div>第三个盒子</div>
</body>

Copy after login

How to make boxes appear side by side in css

The default style attribute of the div box itself is to occupy an exclusive line. There are usually two ways to solve the problem of p occupying an exclusive line. One is to set a float, and the other is to Set display style. Next, through articles, pictures and case methods, I will introduce the method to solve the problem of p box objects being arranged side by side horizontally and displayed in the same row.

1. Use css float to display side by side

We set a float attribute on the div to solve the problem of not displaying side by side. As long as the total width of your side by side p box is less than or Equal to the width of the outermost box , multiple p objects can be displayed side by side.
Note: ①Set the float attribute; ②The total width of the side by side is smaller than the width of the outer layer.

<style>
div{
    border: 1px solid #000;
    float:left;
}
</style>

Copy after login

How to make boxes appear side by side in css

#Here we set a float for the div. Of course, in actual use, if we want to display the div objects in rows and add the css class, we will display them in parallel. css selector set float. Avoid other unnecessary settings from being added to the floating style.

2. Use css display to display peers

We can solve the problem by adding display:inline to display div box objects side by side.

Set the div{ display:inline} style to the div tag, and take a screenshot after solving the problem:

<style>
div{
    border: 1px solid #000;
    display: inline;
}
</style>

Copy after login

How to make boxes appear side by side in css

Recommended learning: css video tutorial

The above is the detailed content of How to make boxes appear side by side in css. For more information, please follow other related articles on the PHP Chinese website!