Html 如何将这个div提升到顶部？ #左{ 宽度：50%；高度：200px；浮动：左；边框：2件纯黑； } #向下{ 宽度：50%；高度：200px；边框：2件纯黑；浮动：左； } #对{ 宽度：40%；高度：200px；边框：2件纯黑；浮动：对； }_Html_Css

Html 如何将这个div提升到顶部？ #左{ 宽度：50%；高度：200px；浮动：左；边框：2件纯黑； } #向下{ 宽度：50%；高度：200px；边框：2件纯黑；浮动：左； } #对{ 宽度：40%；高度：200px；边框：2件纯黑；浮动：对； }

html css

Html 如何将这个div提升到顶部？ #左{ 宽度：50%；高度：200px；浮动：左；边框：2件纯黑； } #向下{ 宽度：50%；高度：200px；边框：2件纯黑；浮动：左； } #对{ 宽度：40%；高度：200px；边框：2件纯黑；浮动：对； },html,css,Html,Css,如何在不更改html内部任何内容的情况下将“右”div移到右上方？这就是它的样子这是它需要的样子。另外，我不需要使用相对绝对值，因为如果我缩放或取消缩放，它将被弄乱使用display:inline block和vertical align:top而不是float <html> <style> #left{ width:50%; height:200px; float:left; border:2px solid black; }

如何在不更改html内部任何内容的情况下将“右”div移到右上方？
这就是它的样子
这是它需要的样子。

另外，我不需要使用相对绝对值，因为如果我缩放或取消缩放，它将被弄乱

使用display:inline block和vertical align:top而不是float

<html>
<style>
#left{
    width:50%;
    height:200px;
    float:left;
    border:2px solid black; 
}

#down{
    width:50%;
    height:200px;
    border:2px solid black;
    float:left;
}
#right{
    width:40%;
    height:200px;
    border:2px solid black;
    float:right;
}
</style>
<body>
    <div id="left"></div>
    <div id="down"></div>
    <div id="right"></div>
</body>
</html>

显示：内联块；

垂直对齐：顶部；}

最好的方法就是添加

#right{transform:translatey（-100%）}

就是使用这个，它适用于这个例子

编辑：我在正文中加入了“调整内容：间距”，使其与您的图片完全相同

#左{
宽度：50%；
高度：200px；
边框：2件纯黑；
}
#向下{
宽度：50%；
高度：200px；
边框：2件纯黑；
}
#对{
宽度：40%；
高度：200px；
边框：2件纯黑；
溢出：隐藏；
}
正文{显示：flex；
柔性包装：包装；
对齐内容：间隔；}
.box:第n个孩子（2）{
顺序：2；
}

另一种选择是使用flexbox，但您需要一个用于存放物品的容器。也许是太普通了

#left, #right, #down {

这里有一个解决方案：

增加

body {display: flex; flex-flow: row wrap-reverse;}

至

#右侧

#左{
宽度：50%；
高度：200px；
浮动：左；
边框：2件纯黑；
}
#向下{
宽度：50%；
高度：200px；
边框：2件纯黑；
浮动：左；
}
#对{
宽度：40%；
高度：200px；
边框：2件纯黑；
位置：绝对位置；
右：0；
}

负边距顶部？如果我在缩放或取消缩放时使用边距顶部，也会弄乱绝对位置，或者更好，在自己的div和float中使用带对齐内容的flex box wrap

left

down

是的，需要订购。

position:absolute;
right:0;