Fatal编程技术网
  • html/
  • html和css中的布局

html和css中的布局

html css

html和css中的布局,html,css,Html,Css,当我应用下面的代码时，左上角div和右上角div重叠我的文本。我希望我的文本能以这种方式转换，这样重叠的问题就可以解决了。有人能告诉我解决办法吗？我正在尝试使用clear属性解决此问题，但这对我没有帮助。。如果有更好更简单的解决方案，请告诉我，因为我是html和css领域的新手 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

当我应用下面的代码时，左上角div和右上角div重叠我的文本。我希望我的文本能以这种方式转换，这样重叠的问题就可以解决了。有人能告诉我解决办法吗？我正在尝试使用clear属性解决此问题，但这对我没有帮助。。如果有更好更简单的解决方案，请告诉我，因为我是html和css领域的新手

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        layout
    </title>
    <style type="text/css">
        .topright{
            border:dashed 2px red;
            background-color:gray;
            margin:10px;
            padding:10px;
            position:absolute;
            left:0px;
            top:0px;
            clear:left;
        }
        .topleft{
            border:dashed 2px red;
            background-color:gray;
            margin:10px;
            padding:10px;
            position:absolute;
            right:0px;
            top:0px;
        }
        .bottomright{
            border:dashed 2px red;
            background-color:gray;
            margin:10px;
            padding:10px;
            position:absolute;
            left:0px;
            bottom:0px;
        }
        .bottomleft{
            border:dashed 2px red;
            background-color:gray;
            margin:10px;
            padding:10px;
            position:absolute;
            right:0px;
            bottom:0px;
        }
        .clearing{
            clear:right;
        }
    </style>
</head>
<body>
    <div class="topright">
        topright
    </div>
    <div class="topleft">
        topleft
    </div>
    <div class="bottomright">
        bottomright
    </div>
    <div class="bottomleft">
        bottomleft
    </div>
    <p class="clearing">
        The absence of romance in my history will, I fear, detract somewhat
        from its interest; but if it be judged useful by those inquirers who
        desire an exact knowledge of the past as an aid to the interpretation
        of the future, which in the course of human things must resemble if
        it does not reflect it, I shall be content.
    </p>
    <p>
        The absence of romance in my history will, I fear, detract somewhat
        from its interest; but if it be judged useful by those inquirers who
        desire an exact knowledge of the past as an aid to the interpretation
        of the future, which in the course of human things must resemble if
        it does not reflect it, I shall be content. In fine, I have written
        my work, not as an essay which is to win the applause of the moment,
        but as a possession for all time.
    </p>
    <p>
        The absence of romance in my history will, I fear, detract somewhat
        from its interest; but if it be judged useful by those inquirers who
        desire an exact knowledge of the past as an aid to the interpretation
        of the future, which in the course of human things must resemble if
        it does not reflect it, I shall be content. In fine, I have written
        my work, not as an essay which is to win the applause of the moment,
        but as a possession for all time.
    </p>
</body>
</html>


布局
托普赖特先生{
边框：虚线2px红色；
背景颜色：灰色；
利润率：10px；
填充：10px；
位置：绝对位置；
左：0px；
顶部：0px；
清除：左；
}
左上角{
边框：虚线2px红色；
背景颜色：灰色；
利润率：10px；
填充：10px；
位置：绝对位置；
右：0px；
顶部：0px；
}
.右下角{
边框：虚线2px红色；
背景颜色：灰色；
利润率：10px；
填充：10px；
位置：绝对位置；
左：0px；
底部：0px；
}
.左下角{
边框：虚线2px红色；
背景颜色：灰色；
利润率：10px；
填充：10px；
位置：绝对位置；
右：0px；
底部：0px；
}
.清算{
清楚:对,；
}
右上角
左上角
右下角
左下角


我担心，我的历史中缺乏浪漫会在某种程度上减损我的声誉
从其利益出发；但是如果那些询问者认为它有用
渴望对过去有一个准确的了解，作为解释的帮助
未来，在人类的发展过程中，如果
它没有反映出来，我会满足的。



我担心，我的历史中缺乏浪漫会在某种程度上减损我的声誉
从其利益出发；但是如果那些询问者认为它有用
渴望对过去有一个准确的了解，作为解释的帮助
未来，在人类的发展过程中，如果
它没有反映出来，我会满足的。好吧，我已经写过了
我的作品，不是作为一篇赢得当下掌声的文章，
但作为一种永久的财产。



我担心，我的历史中缺乏浪漫会在某种程度上减损我的声誉
从其利益出发；但是如果那些询问者认为它有用
渴望对过去有一个准确的了解，作为解释的帮助
未来，在人类的发展过程中，如果
它没有反映出来，我会满足的。好吧，我已经写过了
我的作品，不是作为一篇赢得当下掌声的文章，
但作为一种永久的财产。
这就是你想要实现的目标吗

CSS

.topright{
    border:dashed 2px red;
    background-color:gray;
    margin:10px;
    padding:10px;
    float: right;
}
.topleft{
    border:dashed 2px red;
    background-color:gray;
    margin:10px;
    padding:10px;
    float: left;
}
.bottomright{
    border:dashed 2px red;
    background-color:gray;
    margin:10px;
    padding:10px;
    position:absolute;
    left:0px;
    bottom:0px;
}
.bottomleft{
    border:dashed 2px red;
    background-color:gray;
    margin:10px;
    padding:10px;
    position:absolute;
    right:0px;
    bottom:0px;
}
.clearing{
    clear:both;
}
绝对定位总是将元素从正常文档流中移除。它们被其他元素视为不存在（现在人们称之为mobbing=D）。您必须手动操作，确保不会发生重叠

有几种解决方案：

  • 将元素左右浮动。这也可以通过您在段落中添加的
    clear
    语句来解决
  • 使用绝对定位，但对段落应用边距以防止重叠
    • 第二个解决方案的演示：

    一般来说，如果可能的话，应该避免使用浮动和绝对位置来防止此类问题。如今，我们有了像or这样的现代产品（遗憾的是，它有atm，但我相信这很快就会迎头赶上），旨在适应浮动和绝对位置的缺点

    您肯定应该看看这些规范（以及许多可用的演示），因为它们无疑是web开发布局的未来。

    最好使用浮动来保持文档流：

    HTML

    你到底想做什么？这些div是什么，为什么它们是这样定位的？解决方案是什么？我只是在学习布局，借助css和html，当我应用这些代码时，我的左上div与网页上的文本重叠。我只是想移动我的文本，以便解决重叠问题。最好改用float。@Xareyo你确定，是吗？我只是在学习css和html的帮助下布局当我应用这段代码时，我左上角的div与网页上的文本重叠我只是想移动我的文本，这样重叠的问题就可以解决无需内联声明。。。否则，这是一个很好的解决方案+不客气！下面是每个web开发人员的一个重要链接：（我的回答中也包括了这个）。 
    <div class="topright">topright</div>
<div class="topleft">topleft</div>
<p class="clearing">
    The absence of romance in my history will, I fear, detract somewhat
    from its interest; but if it be judged useful by those inquirers who
    desire an exact knowledge of the past as an aid to the interpretation
    of the future, which in the course of human things must resemble if
    it does not reflect it, I shall be content.
</p>
<!-- ...rest of markup... -->