DIV is a block element. The so-called block element means that only one row can have one by default. No matter whether there are any remaining positions behind the line, the second row will be placed in the second row.
Generally, the following definition is used to place two divs in one row:
#div1{display:inline; float:left;}
Display: inline indicates converting it to an inline element, and then multiple rows can be placed. Float: Left indicates to float to the left, and all elements will float at the top left in sequence.
If you just don't want to use float, can you put two block elements in one row? The answer is yes.
To achieve this effect, we need to use the power of the position tag.
The position tag has many attributes, which are the role of each value.
| Value | Description |
|---|---|
| Absolute | Generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes. |
| Fixed | Generates absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes. |
| Relative | Generates relative positioning elements and locates them relative to their normal locations. Therefore, "Left: 20" adds 20 pixels to the left position of the element. |
| Static | Default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or Z-index declarations ). |
| Inherit | Specifies that the value of the position attribute should be inherited from the parent element. |
Now I want to put a large Div box in the center of the screen, and then draw a four-cell box in it. The margin of each small box and large box is 50px, and the gap between small boxes is also 50px.
Absolute is a good value, but it cannot change the position with the browser window.
So my eyes slide to relative. Let's guess how many top and left boxes need to be set to arrange the positions of the four boxes? I didn't guess it ......
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">The left value is the actual margin. What is the top value? It turns out that the first frame occupies the height of 200px, and the default position of the second frame is 200px. Now it is placed in the position of 50px, so the top frame should be set to-150px! And so on. The other two are also set in this way.
No wonder you need to use float. This method is indeed a little troublesome. If you want to change the height of the first Div, the values behind it will be recalculated!
Write it again using the float method!
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">Simplified the code and heap the same value settings.
At first, I made a mistake. I thought float: left on the left, and float: Right on the right ...... It turns out that all the divs must be consistent on the top left!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
