HTML css浮动窗格右移问题

html-css014

HTML css浮动窗格右移问题,第1张

用css设置右浮动的话用div包围起来;

比如:<div id='d1'>右浮动</div>

css设置:

#d1{

floatright

}

如果不采用float,不妨考虑Flex布局

这几种布局都可以简单实现,换行的话也是一行代码即可,如下图

以下是一个简单的flex布局:

<!--思路:让原本每个子div都占据一行的变成五个一共占一行,在不使用float的情况下,使用flex去实现-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .content{ display:-webkit-flex display:flex}   /*Flex布局*/

    /*注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。*/

</style>

<body>

<!--设置若干个div,content下的div在flex 的作用下,都会往左浮动-->

<div class="content">  <!--设置类名-->

    <div>1</div><!--设置5个div-->

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

</div>

</body>

</html>