Home > Web Front-end > HTML Tutorial > 为什么div右浮动后还会换行_html/css_WEB-ITnose

为什么div右浮动后还会换行_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:31:44
Original
1753 people have browsed it

为什么div右浮动后还会换行:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
让两个div排列在同一行有多种方法,有些初学者可能会这样写,那就是左边的div不浮动,右边的div右浮动,以为这样就可以达到两个div在同一行的效果的,但是事实并非如此。代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.left{  width:200px;  height:200px;  background-color:blue;}.right{  width:200px;  height:200px;  background-color:red;  float:right;}</style></head><body><div class="left"></div><div class="right"></div></body></html>
Copy after login

所以我们想要让两个div在同一行上,还是需要将两个div都要浮动起来。代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.left{  width:200px;  height:200px;  float:right;  background-color:blue;}.right{  width:200px;  height:200px;  background-color:red;  float:right;}</style></head><body><div class="left"></div><div class="right"></div></body></html>
Copy after login

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4659

更多内容可以参阅:http://www.softwhy.com/divcss/

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template