Html 如何将div添加到响应div的右侧？_Html_Css

Html 如何将div添加到响应div的右侧？

html css

Html 如何将div添加到响应div的右侧？,html,css,Html,Css,我基本上希望标签“div 1”显示在div的右侧，无论发生什么，我都会保持响应。有什么好办法吗我无法得到一个仍然保持我想要的响应能力的包装器 #包装器{ 宽度：自动；明确：两者皆有； } #第二{ 背景颜色：蓝色；宽度：自动；浮动：左； } .项目{ 显示器：flex；柔性包装：包装；左边距：-10px；利润上限：-10px； } .项目.项目{ flex:10200px；框大小：边框框；背景#e0ddd5；颜色：#171e42；填充：10px；左边距：10px；边缘

我基本上希望标签“div 1”显示在div的右侧，无论发生什么，我都会保持响应。有什么好办法吗

我无法得到一个仍然保持我想要的响应能力的包装器

#包装器{
宽度：自动；
明确：两者皆有；
}
#第二{
背景颜色：蓝色；
宽度：自动；
浮动：左；
}
.项目{
显示器：flex；
柔性包装：包装；
左边距：-10px；
利润上限：-10px；
}
.项目.项目{
flex:10200px；
框大小：边框框；
背景#e0ddd5；
颜色：#171e42；
填充：10px；
左边距：10px；
边缘顶部：10px；
宽度：自动；
浮动：左；
}
@介质（最小宽度：410像素）{
.项目.项目{
最大宽度：计算（50%-10px）；
}
}
@介质（最小宽度：620px）{
.项目.项目{
最大宽度：计算（33.33333%-10px）；
}
}
@介质（最小宽度：830像素）{
.项目.项目{
最大宽度：计算（25%-10px）；
}
}
@介质（最小宽度：1040px）{
.项目.项目{
最大宽度：计算（20%-10px）；
}
}
@介质（最小宽度：1250px）{
.项目.项目{
最大宽度：计算值（16.66667%-10px）；
}
}
@介质（最小宽度：1460px）{
.项目.项目{
最大宽度：计算值（14.28571%-10px）；
}
}
@介质（最小宽度：1670px）{
.项目.项目{
最小宽度：计算（12.5%-10px）；
}
}


上下快速移动


上下快速移动
上下快速移动
上下快速移动
上下快速移动
上下快速移动
第一组

解决方案1：浮动 <>而不是使用Frasbox，考虑使用<代码>显示：联机块命令您的div。这有两个好处：

1）它的跨浏览器支持略好于flexbox（请参阅：），因为IE10和11并不是100%支持它，您可能希望针对这些浏览器

2）它允许我们更好地利用

float

CSS属性，这对于您所寻找的内容非常有用

如果将所有

.item

div

显示为：inline block

并将所需的div放置在HTML中它们旁边的右侧，则只需将

float:right

应用于右侧div即可。这有一些你应该注意的注意事项，我将在下面解释

HTML 这是根据你在问题中给出的内容简化的

已知问题此解决方案存在一些问题，但这些问题您可能没有问题，特别是如果您提前知道这些问题的话

首先，如果没有项目，可能需要清除父div，使其与浮动元素的高度匹配

第二，与第一个类似，如果您的右元素的高度大于项目的总组合内容，那么您将再次需要一个clearfix

解决方案2：并排内容另一种可能的解决方案是将您的所有项目包含在

宽度的div中，将您的正确内容包含在

宽度的div中，其中

是屏幕宽度减去

的100%

HTML 因此，让我们采用基本相同的HTML（使用一些新的包装）：

你会得到一个非常相似的效果。不同之处在于超出正确内容高度的项目不会显示在其下方

请注意，在本例中，我使用了

150px

作为正确的内容大小，但只要在

calc（）

和正确的大小中进行更改，您就可以自由更改为任何您想要的大小。