Home >Web Front-end >HTML Tutorial >How to adjust two layers to be on the same level_html/css_WEB-ITnose
How to adjust two layers to be on the same level_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:291913browse
CSS layer
How to set two layers on the same horizontal line
Is it to adjust the float attribute
Please beg me
Reply to the discussion (solved Solution)
Make it clear
If it is an absolutely positioned layer, it will be flat if it is rendered into the same container and its top is the same
Margin-top, use this?
If there are two divs, just set the float attribute to left if they are just on the same horizontal line. Pay attention to the width. If the combined width of the two divs exceeds the width of the upper layer, If the width of the container is different, the second div will fall to the lower layer;
If two divs overlap, you can set position to absolute, and then set the z-index attribute to determine which div is located upper level, which is located on the ground floor.
The same horizontal line above?
The bottom edge is the same horizontal line?
float:left right
If there are two divs, just for the same horizontal line, just set the float attribute to left. Pay attention to the width. , if the combined width of the two divs exceeds the width of their upper container, the second div will fall to the lower layer;
If the two divs overlap, you can set position to absolute , and then set the z-index attribute to determine which div is on the upper layer and which one is on the bottom layer.
Two ways of doing the same horizontal line
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><div style="width:100px; float:left; display:inline; height:200px; background-color:#ccc;">左边</div><div style="width:100px; float:left; display:inline; height:200px; background-color:#999933;">右边</div></body></html>
<div id="leftcolumn" style="float:left;width:100px;height:100px"></div><div id="rightcolumn" style="margin-left:110px;height:100px"></div>