Html 固定宽度项目在基于百分比的父项中的对齐方式_Html_Css_Css Calc

Html 固定宽度项目在基于百分比的父项中的对齐方式

html css

Html 固定宽度项目在基于百分比的父项中的对齐方式,html,css,css-calc,Html,Css,Css Calc,目前，我有一个最大宽度为1600像素的外部容器，它可以缩小到基于屏幕宽度的宽度以下 A在外部有一个最大宽度为1200像素的内部容器我在外容器中有一个弹性盒，它有两个孩子，一个是60%宽，另一个是40%宽。我在60%的父对象中有一个div，因此我不希望左侧边缘超出上面的1200像素容器问题是，我无法使60%父对象中的div与1200像素容器的左侧对齐。当屏幕宽度大于1600像素或小于1200像素时，它工作，但不在两者之间下面是一张图片，展示我正在努力实现的目标：我已经提出了一个使用媒体查

目前，我有一个最大宽度为1600像素的外部容器，它可以缩小到基于屏幕宽度的宽度以下

A在外部有一个最大宽度为1200像素的内部容器

我在外容器中有一个弹性盒，它有两个孩子，一个是60%宽，另一个是40%宽。我在60%的父对象中有一个div，因此我不希望左侧边缘超出上面的1200像素容器

问题是，我无法使60%父对象中的div与1200像素容器的左侧对齐。当屏幕宽度大于1600像素或小于1200像素时，它工作，但不在两者之间

下面是一张图片，展示我正在努力实现的目标：

我已经提出了一个使用媒体查询的解决方案，

calc（）

和

100vw

，但是它是精心设计的，因为100vw包含滚动条宽度

下面是我到目前为止的代码片段（您需要在全屏模式下运行此程序，并调整屏幕大小以了解正在发生的事情）

有没有我遗漏的简单计算或解决方案

正文{
保证金：0；
填充：10px；
}
.外部{
最大宽度：1600px；
保证金：0自动；
边框：实心1px绿色；
颜色：绿色；
}
.内部{
最大宽度：1200px；
保证金：0自动20px自动；
边框：实心1px黑色；
颜色：黑色；
}
.flex{
显示器：flex；
颜色：红色；
}
.flex>div:第一个孩子{
宽度：60%；
边框：实心1px红色；
框大小：边框框；
}
.flex>div:最后一个孩子{
宽度：40%；
边框：实心1px红色；
框大小：边框框；
}
.对齐{
边框：纯色1px蓝色；
左边距：自动；
/*最大宽度：757px；不工作*/
颜色：蓝色；
}
@媒体屏幕和（最小宽度：1220px）{/*额外20像素用于正文填充*/
.对齐{
左边距：计算（（100vw-1200px-20px）/2）；
}
}
@媒体屏幕和（最小宽度：1620px）{/*用于正文填充的额外20像素*/
.对齐{
左边距：198px；
}
}


最大宽度1600px
最大宽度1200px
宽度60%
左边缘与上方1200px对齐
宽度40%

你几乎做得很好。将

100vw

替换为容器宽度，因为父元素为

60%

（0.6*100%），因此容器宽度为

100%/0.6

正文{
保证金：0；
填充：10px；
}
.外部{
最大宽度：1600px；
保证金：0自动；
边框：实心1px绿色；
颜色：绿色；
}
.内部{
最大宽度：1200px；
保证金：0自动20px自动；
边框：实心1px黑色；
颜色：黑色；
}
.flex{
显示器：flex；
颜色：红色；
}
.flex>div:第一个孩子{
宽度：60%；
边框：实心1px红色；
}
.flex>div:最后一个孩子{
宽度：40%；
边框：实心1px红色；
}
.对齐{
边框：纯色1px蓝色；
左边距：自动；
颜色：蓝色；
}
@媒体屏幕和屏幕（最小宽度：1220px）{
.对齐{
左边距：计算（（100%/0.6-1200px）/2）；
}
}
@媒体屏幕和屏幕（最小宽度：1620px）{
.对齐{
左边距：200px；
}
}
* {
框大小：边框框；
}


最大宽度1600px
最大宽度1200px
宽度60%
左边缘与上方1200px对齐
宽度40%

你几乎做得很好。将

100vw

替换为容器宽度，因为父元素为

60%

（0.6*100%），因此容器宽度为

100%/0.6

正文{
保证金：0；
填充：10px；
}
.外部{
最大宽度：1600px；
保证金：0自动；
边框：实心1px绿色；
颜色：绿色；
}
.内部{
最大宽度：1200px；
保证金：0自动20px自动；
边框：实心1px黑色；
颜色：黑色；
}
.flex{
显示器：flex；
颜色：红色；
}
.flex>div:第一个孩子{
宽度：60%；
边框：实心1px红色；
}
.flex>div:最后一个孩子{
宽度：40%；
边框：实心1px红色；
}
.对齐{
边框：纯色1px蓝色；
左边距：自动；
颜色：蓝色；
}
@媒体屏幕和屏幕（最小宽度：1220px）{
.对齐{
左边距：计算（（100%/0.6-1200px）/2）；
}
}
@媒体屏幕和屏幕（最小宽度：1620px）{
.对齐{
左边距：200px；
}
}
* {
框大小：边框框；
}


最大宽度1600px
最大宽度1200px
宽度60%
左边缘与上方1200px对齐
宽度40%

如果您不希望子容器的大小超过其大小，为什么不将其放入内部容器中？否则，

calc

是您的最佳选择，尽管使用CSS网格可能是可行的。向我们展示您的calc解决方案。“flakey，即因为100vw包含滚动条宽度”-也许它可以替换为100%？取决于您在哪里计算的具体内容。我已更新了问题，以通过媒体查询和100vw显示我的解决方案。这可以正常工作（除了1像素舍入错误），直到出现垂直滚动条。然后，对齐可以达到8个像素，这取决于滚动条的宽度。如果您不希望子对象扩展到超出其大小，为什么不将子对象放入内部容器中？否则，

calc

是您的最佳选择，尽管使用CSS网格可能是可行的。向我们展示您的calc解决方案。“flakey，即因为100vw包含滚动条宽度”-也许它可以替换为100%？取决于您在哪里计算的具体内容。我已更新了问题，以通过媒体查询和100vw显示我的解决方案。这可以正常工作（除了1像素舍入错误），直到出现垂直滚动条。然后，根据滚动条的宽度，对齐最多可以达到8个像素。非常感谢！最后，我在家长身上选择了填充选项。现在我只有

[css]相关文章推荐

随机文章推荐