Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Three divs are defined. How to make these three divs display on the same line? Why can't my css code below be implemented? _html/css_WEB-ITnose

Three divs are defined. How to make these three divs display on the same line? Why can't my css code below be implemented? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:49:22

Original

1778 people have browsed it

html5

这里是第一个div里面的内容

这里是第三个div里面的内容

回复讨论(解决方案)

.

html5

div{
     width: 200px;
     height:100px;

}
#outDiv{
     width: 610px;
}
#oneDiv{
         border:1px solid black;
         float: left;

}
#twoDiv{
         border:1px solid red;
      float: left;
}

#threeDiv{
         border:1px solid blue;
         float: left;
}

这里是第一个div里面的内容

这里是第三个div里面的内容

为啥要设置outDiv的宽度？好像外部div的宽高会被内部div的内容会自动撑满的吧？!

#outDiv{
width: 610px;
}

div{width: 200px; height:100px;}把所有的div都设置了，包括outDiv

float: left;只是设置如何浮动，又不是强制限制显示在同一行，当父容器宽度不够时会显示在下一行

只有单个元素的宽度超过父容器，父容器才会被撑开

source：php.cn

Previous article：How HTML web pages automatically adapt to mobile phone screens_html/css_WEB-ITnose Next article：Discussion: The difference between browser mode and document mode in IE browser_html/css_WEB-ITnose

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