Html 修复了故意丢失数据的div容器_Html_Css_Responsive Design_Containers

Html 修复了故意丢失数据的div容器

html css responsive-design

Html 修复了故意丢失数据的div容器,html,css,responsive-design,containers,Html,Css,Responsive Design,Containers,如何在页面上创建一个固定的div容器，以便当页面宽度缩小时，容器中的元素保持静态，并从页面的左侧和右侧溢出？我还需要容器在页面上保持居中，而不进行任何水平滚动大宽度：较小宽度：我尝试使用空白：nowrap；溢出-x：隐藏，但这对我不起作用。在上面的示例中，有7个不同的框（假设这是7个不同的图像），如果屏幕宽度变宽，我可以重复这些框这可能是一种问题，你想通过问Y来实现X，而Z是一个更好的选择我不知道你为什么要使用固定定位，这意味着图像描述的不是定位，而是元素的流动不管怎样，如果我正

如何在页面上创建一个固定的div容器，以便当页面宽度缩小时，容器中的元素保持静态，并从页面的左侧和右侧溢出？我还需要容器在页面上保持居中，而不进行任何水平滚动

大宽度：

较小宽度：

我尝试使用

空白：nowrap；溢出-x：隐藏

，但这对我不起作用。在上面的示例中，有7个不同的框（假设这是7个不同的图像），如果屏幕宽度变宽，我可以重复这些框

这可能是一种问题，你想通过问Y来实现X，而Z是一个更好的选择

我不知道你为什么要使用固定定位，这意味着图像描述的不是定位，而是元素的流动

不管怎样，如果我正确理解你想要什么，你可以使用flexBox


.centered_content {
  display: flex;
  justify-content: center;
}

试着用这个。这不是你要找的吗？然而，这取决于知道容器块的总宽度——您可以在使用js（或jQuery的simplier）加载页面时计算它

因此.static容器必须具有.block items宽度（包括边距），而.static容器的css属性“left”必须是其总宽度的一半

抱歉，如果它不适合您，请立即手动键入以下简短想法：）

至于自动重复-嗯，似乎您需要实时检查屏幕宽度，在DOM中复制项目，并在屏幕宽度更改时重新计算.static容器。我假设你的项目不是背景，可以重复x光

<!doctype html>
<html>
<body>
<style type='text/css'>
.main-container { position:relative;width:100%;height:100px;background:red;overflow:hidden }
.static-container { position:absolute;width:700px;margin-left:50%;left:-350px;height:80px;background:green; }
.block-items { float:left;margin:5px;width:60px;height:60px;background:orange; }
</style>

<div class='main-container'>
    <div class='static-container'>
        <div class='block-items'>1</div>
        <div class='block-items'>2</div>
        <div class='block-items'>3</div>
        <div class='block-items'>4</div>
        <div class='block-items'>5</div>
        <div class='block-items'>6</div>
        <div class='block-items'>7</div>
        <div class='block-items'>8</div>
        <div class='block-items'>9</div>
        <div class='block-items'>10</div>
    </div>
</div>


</body>
</html>


.main容器{位置：相对；宽度：100%；高度：100px；背景：红色；溢出：隐藏}
静态容器{位置：绝对；宽度：700px；左边距：50%；左边距：-350px；高度：80px；背景：绿色；}
.block项{浮动：左；边距：5px；宽度：60px；高度：60px；背景：橙色；}
1.
2.
3.
4.
5.
6.
7.
8.
9
10

假设您针对的是支持的浏览器，然后使用

@media

规则定义开始和结束元素应应用

显示：无的宽度
使用display:flex
和justify content:space around使子项在页面上均匀分布。flex-grow
、flex-shrink
和flex-basis
的默认值允许子项收缩（如图所示），但不允许子项增长-这是增长的空间。最后，页边距
在缩小页面时在子级之间保留一些空间
解决方案也是一种，因为输出窗格更容易拖动以折叠宽度并查看所需的输出
更新：通过使用flex:0 0 100px
指定无伸缩生长和固定的flex基准：100px
解决了保持儿童宽度/高度固定的意见-另请参见

部分{
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
}
.盒子{
宽度：100px；
最大宽度：100px；
高度：100px；
最大高度：100px；
边框：1px红色虚线；
利润率：0.10px；
flex:0100px；
}
@介质（最大宽度：820像素）{
盒子：第一个孩子，
.盒子：最后一个孩子{
显示：无；
}
}
@介质（最大宽度：620px）{
.盒子：第n个孩子（2），
.box:第n个最后一个孩子（2）{
显示：无；
}
}
@介质（最大宽度：420px）{
.盒子：第n个孩子（3），
.box:第n个最后一个孩子（3）{
显示：无；
}
}

1.
2.
3.
4.
5.
6.
7.
不幸的是，flex与旧浏览器不向后兼容。实际上，即使在一些旧浏览器中，FlexBox也提供了非常好的支持。就像其他任何东西一样，IE 6-9在支持方面做得不好，IE 10和11也有部分支持。这些特性中有很多都有变通方法，这解决了一个完全不同的需求。正如你从我文章的截图中看到的，我需要内容从页面的左右两侧均匀溢出。Flexbox将始终以页面最左边的图像开始。我的解决方案如何满足您的需求？这是一个很好的解决方案。唯一的问题是，.box
元素的宽度随着容器宽度的变化而增长/收缩，而我需要它们是一个静态的宽度和高度，这只是因为我在回答中解释了默认值。它可以通过摆弄flex-grow
、flex-shorn
和flex-basis
来修复。另外，你的图像显示一个盒子的宽度在缩小，所以我想你想要这个啊，是的，可能不清楚。这张图片应该是显示左右两边的盒子被切偏了，我明白了，但是盒子3和5明显窄了。无论如何，我已经更新了我的解决方案，以满足澄清的要求。第二张图中的框3和5应该被剪掉，而不是缩小