Fatal编程技术网
  • html/
  • Html 如何使用float在网页中放置div？

Html 如何使用float在网页中放置div？

html css

Html 如何使用float在网页中放置div？,html,css,Html,Css,我用HTML和CSS制作了一个简单的网页。但是，当我调整浏览器大小时，div会四处移动并丢失其原始位置。我唯一的限制是我必须坚持浮动，而不是使用表格等 我希望我的布局像这样- HTML- <!DOCTYPE html> <html lang="en"> <body> <header> <div> <h1>Hello</h1> &

我用HTML和CSS制作了一个简单的网页。但是，当我调整浏览器大小时，div会四处移动并丢失其原始位置。我唯一的限制是我必须坚持浮动，而不是使用表格等

我希望我的布局像这样-

HTML-

<!DOCTYPE html>
<html lang="en">

<body>
    <header>
        <div>
           <h1>Hello</h1>
        </div>   
    </header>

    <div class="a"><b>One</b></div>
    <div class="b"><b>Two</b></div>
    <div class="c"><b>Three</b></div>
    <p>
    <div class="d"><b>Four</b></div>
<body>
有一百万种方法可以像你想要的那样组织你的网站。这里有一条路。请看一看我为你做的这个例子

.container{
文本对齐：右对齐；
}
.a{
显示：内联flex；
宽度：32%；
背景颜色：灰色；
}
.b{
显示：内联flex；
宽度：32%；
背景颜色：灰色；
}
c{
显示：内联flex；
宽度：32%；
背景颜色：灰色；
}
博士{
显示：内联flex；
宽度：33%；
背景颜色：灰色；
}

你好
一
二
三
四
推荐： 父级需要以下属性：

  • display:flex
  • flex-flow:row-reverse
    按所需顺序排列子项
  • flex wrap:wrap
    允许它们进行包装
  • justify content:space-between
    在父级中均匀地隔开内容，两端没有间隙
然后您需要为孩子们指定一行中有多少个，并使用
margin
这样定义他们的间距：
minwidth:calc（100%/AMOUNT\u CHILDREN-HORIZONTAL\u GAP*2）
其中
AMOUNT\u CHILDREN
将是一行中的元素数量，
HORIZONTAL\u GAP
将是在
margin
属性中定义的水平间隙的数量

注意：
仅当希望子项占用指定空间时，才需要该公式。如果希望在合适的时候让它们膨胀或收缩，则无需设置

正文{
显示器：flex；
柔性流程：行反向；
柔性包装：包装；
证明内容：之间的空间；
}
div{
保证金：0.2rem；
最小宽度：计算值（100%/3-0.2rem*2）；
背景：灰色；/*表示元素的大小*/
}
A
B
C

D
尝试对响应性网页使用CSS flex或网格。这是处理此类问题的最佳实践。

为什么您必须使用
float
。这就是十年前布局被黑客攻击的方式。这不是它设计的目的。我们现在有Grid和Flexbox。我觉得“失去它们的位置”是
float
的预期行为。您也没有关闭代码中的
-和
-标记。看起来你在用类似的东西。您使用的方式不一定是错误的，但以预期的方式使用属性通常更容易理解（除了您使用的
.a
、
.b
等。与此处显示的情况相比，您使用的频率更高，那么您做得绝对正确）。 
body {
  padding-top: 5em;
  text-align: center;
}

.a {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 20em;
}

.b {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.c {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.d {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  height: 7em;
  line-height: 7em;
  margin-left: 65.25%;
  margin-top: 2em;
}