相关疑难解决方法(0)

我有X个图像(所有相同的高度和宽度),我想在网页上显示它们.但我想让页面在调整浏览器大小时自动显示一行中的最大图像数量(不调整图像大小),并将图像显示为固定距离.

此外,图像应在页面中央组合在一起,并一个接一个地显示.

例如,当浏览器窗口宽度足以在一行上显示3个图像时,它们应显示如下.

每行3个图像以固定的距离分组在一起,在页面的中心,一个接一个.

如果浏览器变得更宽,那么可以在一行上显示4个图像,它们应该像这样显示.

每行4个图像(不调整图像大小),在页面中心一个接一个地分开固定距离.

到目前为止,我已经编写了以下代码:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

因此,图像以div(inner-div)内部的10px填充内联显示,然后在outer-div内居中.并且图像在内部div内部与文本对齐.

但问题是它们显示如下:

当浏览器变宽时,如下所示

有人可以告诉我如何显示像第一组图像的图像？

即每行的最大图像数(不调整图像大小),一个接一个地在页面中心组合在一起,固定距离(包裹).

我想弄清楚flexbox如何工作(应该工作？...),如下所示:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage …

我希望摆脱媒体查询,只是使用flexbox来解决我的问题,但我不确定这是否可行.随着窗口变小,我希望列缩小,直到它们达到最小宽度.一旦它们击中,中间列将跳下来进行包裹.

我认为我的问题可以归结为这一点 - 当它包装时,它可以检测到弹性盒吗？如果是这样,我可以提示它改变严格的CSS包装项目的顺序吗？

这里是一个codepen的我"米尝试使用媒体查询来实现.

.wrapper {
  display: flex;
  justify-content: center;
  margin: 5px;
  flex-wrap: wrap;
}

.red {
  background-color: red;
  height: 240px;
  margin: 5px;
  width: 500px;
  order: 0;
}

.yellow {
  background-color: yellow;
  margin: 5px;
  height: 240px;
  min-width: 240px;
  max-width: 400px;
  flex: 1;
  order: 1;
}

.blue {
  background-color: blue;
  height: 240px;
  margin: 5px;
  min-width: 350px;
  max-width: 400px;
  flex: 1;
  order: 2;
}

@media (max-width:1130px) {
  .yellow {
    order: 4;
  }
}

<div class="wrapper">
  <div class="red"></div>
  <div class="yellow"></div> …

我在代码段显示时成功创建了一个响应式网格.

此刻,我看到盒子左边对齐了.

如何在不使用填充的情况下将容器放在页面的中心？

我尝试使用margin:auto但它没有用.

.container{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;
}
.box{
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;
}
@media only screen and ( max-width:768px ){	
    .box{
        width:100%;
        max-width:40%;
        border:1px solid red;
    }
}

<section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS小提琴.

我正试图将一组包裹的柔性物品居中.HTML看起来像这样:

main {
  background-color: blue;
  width: 390px;
  display: flex;
  justify-content: center;
}

.container {
  background-color: red;
  display: inline-flex;
  flex-wrap: wrap;
}

.a1 {
  color: grey;
  width: 100px;
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

<main>
  <div class="container">
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
    <div class="a1"></div>
  </div>
</main>

DEMO

以上看起来像这样:

绿色框被正确包裹,但它们作为一个整体不在红色区域的中心,

没有定义宽度.container因为红色块可以有任何大小,我想尽可能多地匹配彼此相邻的块.

有什么建议如何集中包裹的绿色块？

更新:根据这个 2岁的帖子,这是不可能的.所以在我的情况下,我必须使用JavaScript来解决这个问题.但也许我可以使用CSS网格布局

假设我有一个用户列表,每个用户都附加了一些号码.每个用户都列出如下:

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的风格都是:

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子:

好吧,这看起来很好,用户列表可以长得很长,所以紧凑在这里很重要.我的问题是,右边缘是非常不一致的,所以我想知道是否有任何方法可以改善这一点.

当然,我的第一个想法是在跨度上设置固定宽度.但是,用户名宽度不是完全可预测的.你可以打电话iiiii给某人打电话WWWWW但是因为这不是monospace字体,你会得到"iiiii"和"WWWWW",那里的宽度非常明显不同.所以"最大宽度"基本上是最宽的允许字符,即W乘以最大用户名长度.我们试试吧......

EW.我不妨使用一个<ul>如果这是我将得到的结果.接下来的想法可能是让display:table宽度在列之间保持一致,同时仍然保持动态并且 - 假设大多数人都有合理的用户名(*咳嗽*......哦,嘿,这就是你如何逃避Markdown ......呵呵...... .) - 但它确实往往会留下很多空的空间.

所以我目前的想法是某种合理的对齐.这对文本很有效,对吧？但是,唉,text-align: justify确实在这种情况下完全错误,可能是因为要素之间没有空格.

我最后的尝试是使用flexbox,我已经在网站的新设计中使用了一些效果.让我们看看它display: flex; flex-wrap: wrap;在容器和flex: 1 0 auto;元素上的外观......

嗯,这看起来不太糟糕.不太糟糕

......嗯.很近.我真正喜欢的是最后一行元素不会被拉伸到最终.没关系,最后一行有三个或四个,但两个看起来有点傻,只有一个填满整个宽度,看起来很荒谬.

所以我想这整个小冒险归结为一个简单的问题:

我如何实现类似于对齐的行为,其中元素间隔使用容器的整个宽度,除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事,感谢@ Michael_B的回答,这就是我如何实现解决方案:

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果如下:

美丽.

我有一个瓷砖(或div)的容器,我希望容器居中,而瓷砖在容器中左对齐.

所以如果窗口很小:

..[s][s][s]..
..[s][s].....

如果窗口稍微加宽:

...[s][s][s]...
...[s][s]......

进一步:

.[s][s][s][s].
.[s]..........

我试过了:

#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }

但这似乎不起作用.

我希望至少在Chrome中使用它,但我还需要最终支持最新的FF,Safari和IE 10+

我有这个笨蛋 这个笨蛋。

我试图水平对齐弹性容器，同时保持它们的项目与开头对齐。 我正在尝试align-content: flex-start在使用justify-content: center.

现在，如果最后一行的项目较少，它将以弹性容器为中心，而不是行的开头。

更新1

这是预期的结果：

我有一排任意宽度的项目。它们在容器内居中（注意红色容器左右两侧的空白）：

有时容器会小于所有项目的宽度：

发生这种情况时，我希望最后的项目像这样包装到下一行：

对我来说非常重要的是每一行的内容必须左对齐，但整个网格必须居中：

最初，我尝试用 FlexBox 实现它。经过很多挫折和头发拉扯，我了解到这在 FlexBox 中是不可能的：https ://stackoverflow.com/a/32811002/901944

同一页面上的另一个答案建议使用 CSS 网格而不是 flexbox。

CSS grid 产生的结果略有不同，但这也适合我：

这是使其工作的代码：

.red-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
  justify-content: center;
}

该代码包含了很多的关键词，我不明白：grid-template-columns，repeat，auto-fit，minmax和max-content。我尝试阅读它们并失败了。没有任何指南和 API 文档明确解释这种特定组合的工作原理。MDN 文档太短而且含糊不清。

我特别纠结的是这个210px神奇的数字。为什么有必要？（呃，我知道这是必要的，因为规范是如何设计的，但这并不能帮助我理解。）

我的网格中项目的大小是任意的，所以我不能使用固定值。此外，设置此固定值会使结果略有偏差：小项目会增长，而大项目会溢出容器。

我本质上想要的是：

  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));

但该规则被浏览器认为是错误的。

我偶然发现了这个答案，它解释了在这种情况下规范禁止使用两者min-content和max-content一起使用。答案的建议解决方案是……使用 Flexbox！

循环已关闭。我回到了我开始的地方，希望我现在头上的头发又少了一轮。

如何在左对齐每行内容的同时使网格居中，项目具有任意宽度？

为了您的方便，这里有一个样板：https ://jsbin.com/vuguhoj/edit?html,css, output

可以通过拖动右下角来调整容器的大小。

PS 不display: inline，float: left请。 …

我有一些瓷砖,所有相同,静态宽度和高度在一些容器内.容器的宽度是动态的.瓷砖的数量是动态的.我需要将瓷砖"包裹",以便尽可能多地放在每一行上,但是当瓷砖的数量填满容器的宽度时会创建一个新的行.整行的瓷砖应居中.未填满的一行图块应与整行保持对齐(或者将其定位为完整并居中).见下图.

在此图中,绿色代表容器,黑色代表瓷砖.

我可以通过制作瓷砖inline-block并text-align: center在容器上使用来接近.但是,它出现如下:

这是一个代码示例.我能够对HTML进行必要的更改.

.container {
  border: 5px solid #0f0;
  width: 250px;
  text-align: center;
}

.tile {
  margin: 3px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>