Css 对齐双包裹嵌套flex
我正试图建立一个反应迅速的图库，里面有图像和文字描述。图像及其文本应该并排放置在同一行上，除非宽度太小，并且所有内容都折叠到一列中。我唯一的问题是，在单列模式下，我希望图像在左侧与更宽的文本对齐。其他一切都按照我的要求完美地对齐和居中 我知道flex不应该做我想做的事情，我尝试用网格替换内部flex，但无法使其工作。我很乐意了解解决这个问题的最简单方法，最好不用媒体查询，更一般地说，正确的方法是什么。最重要的是，我不想被要求引入新的任意数字，除了图像的宽度、文本元素的宽度以及给定的间隙。我猜想这样的设计会是一个足够常见的用例，但显然缺乏正确的术语，我找不到参考实现 编辑：在我看来，最有希望的方向是： 为方便修复：为图像提供与文本相同的宽度，并在它们位于同一行时使用负边距修复水平间隙。 正确的方法是：用网格替换内部flex，但我不能让它一直不崩溃。 4列-好： 2列-好： 1列-未对齐： .flex_容器{ 显示器：flex； 柔性包装：包装； 证明内容：中心； 间隙：64px 128px； } .flex_容器_项目{ 显示器：flex； 柔性包装：包装； 证明内容：中心； gap:64px； } .text{宽度：360px；} 说明1 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明2 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明3 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明4 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡Css 对齐双包裹嵌套flex,css,flexbox,gallery,margin,Css,Flexbox,Gallery,Margin,我正试图建立一个反应迅速的图库，里面有图像和文字描述。图像及其文本应该并排放置在同一行上，除非宽度太小，并且所有内容都折叠到一列中。我唯一的问题是，在单列模式下，我希望图像在左侧与更宽的文本对齐。其他一切都按照我的要求完美地对齐和居中 我知道flex不应该做我想做的事情，我尝试用网格替换内部flex，但无法使其工作。我很乐意了解解决这个问题的最简单方法，最好不用媒体查询，更一般地说，正确的方法是什么。最重要的是，我不想被要求引入新的任意数字，除了图像的宽度、文本元素的宽度以及给定的间隙。我猜想这
您的img和div文本容器的宽度不同，请尝试将其保持不变，它将正确对齐 或者，如果您想要文本容器的特定宽度。 然后使用“媒体查询”并将“灵活方向”更改为“列”，以显示较小的屏幕
您的img和div文本容器的宽度不同，请尝试将其保持不变，它将正确对齐 或者，如果您想要文本容器的特定宽度。 然后使用“媒体查询”并将“灵活方向”更改为“列”，以显示较小的屏幕 用div环绕标签，如下所示： 像这样： 用div环绕标签，如下所示： 像这样：
似乎添加下一个条件就可以了-
.image {
width:360px
}
请参见此处：似乎添加下一个条件就可以了-
.image {
width:360px
}
请参见此处：只需将第二类内容更改为左侧：
.flex_container_item img {
border: 1px solid blue; /* just for test */
margin-left: 0;
margin-right: auto;
}
还不允许在此上载图像。只需将第二类内容更改为左侧：
.flex_container_item img {
border: 1px solid blue; /* just for test */
margin-left: 0;
margin-right: auto;
}
还不允许在这里上传图片。现在我只想知道我绑定了你 说明1 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，我们必须尽可能少地工作 ion ullamco Laboratoris nisi ut aliquip ex ea commodo consequat。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明2 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明3 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明4 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
现在我只想知道你，我爱你 说明1 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明2 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明3 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 说明4 知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车 这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡 由我来解决 使用名为image的div包装img。 将div image width设置为与text相同的360px-这将修复单列模式，但现在槽太大，360-256=104px。 为了解决这个问题，我们添加了图像和文本divs:margin:0-52px；-这将通过-52*2=-104修复排水沟，同时保持所有内容的对称性。 最后我们加上利润：052px；to.flex_container_项，以抵消上一步对外部页边距的影响。 外卖： 永不放弃。永远不要投降。我不好意思承认我为此花了多少时间。但是，现在我知道如何使用flex、grid和边距了。 如果gap可以取负值，这会容易得多。有人能帮我推荐这个吗？ 我仍然无法使它与网格一起工作。我认为这是不可能的，因为自动填充的工作方式 CSS被破坏了。这不应该如此困难。解决这个问题不应该花那么长时间。其他尝试性的答案是由一流的网络专家提出的，他们仍然无法正确回答。我现在相信有n o更简单的方法。但应该有。 由我来解决 使用名为image的div包装img。 将div image width设置为与text相同的360px-这将修复单列模式，但现在槽太大，360-256=104px。 为了解决这个问题，我们添加了图像和文本divs:margin:0-52px；-这将通过-52*2=-104修复排水沟，同时保持所有内容的对称性。 最后我们加上利润：052px；to.flex_container_项，以抵消上一步对外部页边距的影响。 外卖： 永不放弃。永远不要投降。我不好意思承认我为此花了多少时间。但是，现在我知道如何使用flex、grid和边距了。 如果gap可以取负值，这会容易得多。有人能帮我推荐这个吗？ 我仍然无法使它与网格一起工作。我认为这是不可能的，因为自动填充的工作方式 CSS被破坏了。这不应该如此困难。解决这个问题不应该花那么长时间。其他尝试性的答案是由一流的网络专家提出的，他们仍然无法正确回答。我现在相信没有比这更简单的方法了。但应该有。
事实上，图像应该比文本薄，然后你可以使用媒体查询来缩小屏幕，并更改弯曲方向以缩小尺寸@仅媒体屏幕和最大宽度：600px{.flex\u容器项目{flex direction:column；}}}`通过调整窗口大小或向外缩放来检查这一点获得600px的计算是什么？600似乎并不涵盖所有情况。在媒体查询开始之前，我得到了一个列，这就是我提供的值。例如，根据您的设计提供值。当图像转换为单列时，请检查断点并提供该值。确实，图像应该比文本薄，然后您可以使用媒体查询来缩小屏幕，并更改弯曲方向以缩小尺寸@仅媒体屏幕和最大宽度：600px{.flex\u容器项目{flex direction:column；}}}`通过调整窗口大小或向外缩放来检查这一点获得600px的计算是什么？600似乎并不涵盖所有情况。在媒体查询开始之前，我得到了一个列，这就是我提供的值。例如，根据您的设计提供值。检查转换为单列时的断点，并提供该值。如果图像和文本位于同一行，则会更改它们之间的间距。如前所述，我的问题是图像和文本的宽度不同的结果。它可能已经能够解决负间隙问题。但是，负间距似乎不是一种东西，它可能具有负边距？这会在图像和文本位于同一行的情况下改变它们之间的间距。如前所述，我的问题是图像和文本的宽度不同的结果。它可能已经能够解决负间隙问题。但似乎负间隙不是一种东西，可能是负边缘？这将图像与窗口左侧对齐，虽然我希望它与居中文本的左侧对齐，但这很难做到，因为文本的宽度是恒定的，而图像的宽度不是恒定的，图像的宽度是256Hmm。布局不常见，但你可以在这里查看更新的代码笔：当图像和文本在同一行时，这会改变间距，此外，在其他一些情况下给出了一个奇怪的布局-请看：这将图像与窗口左侧对齐，而我希望它与居中文本的左侧对齐。这将是非常困难的，因为文本具有恒定的宽度，而图像没有…图像具有256Hmm的恒定宽度。布局不常见，但是您可以在这里查看更新后的代码笔：当图像和文本位于同一行时，这会改变间距，而且在其他一些情况下会产生奇怪的布局-请参见：这会使所有内容都左对齐。但是文本应该居中，这使得所有的东西都是对的。但是文本应该居中。@eyaler你检查过这个答案了吗？它对你有用吗？似乎有用，虽然我仍然不确定为什么应该是720px使用720px媒体宽度，因为我们必须修正。图像类宽度与我们已经为。文本类设置的宽度相同。所以两个类的宽度都是360px，因此，现在两个框内容在同一边缘对齐。所以现在两个块的总宽度都是。图像类宽度360px+。文本类宽度360px=总宽度720px。@eyaler你检查过这个答案了吗，它对你有用吗？似乎有用，虽然我仍然不确定为什么它应该是720px使用720px媒体宽度，因为我们必须修正.image类宽度，就像我们已经为.text类设置的那样，所以两个类的宽度都是相同的360px，所以现在两个框内容在同一边缘对齐。所以现在两个块的总宽度都是。图像类宽度360px+。文本类宽度360px=总宽度720px。嘿，我检查了你的解决方案。你的解决方案不适用于移动屏幕，它提供了滚动。我的代码正在运行
适用于所有设备屏幕。我共享代码视图的屏幕截图。这里是链接。您的代码视图：我的代码视图：您通过提供margin-104的解决方案不如我的完美。谢谢您的有用评论。你在我的问题定义中提出了一些我没有考虑到的优点，你似乎也在解决这些问题。实际上，我最初的方法在设计上突破了360px以下，因为我使用的是固定宽度元素，最高可达360px。此外，我接受的答案中的负边距方法阻止了轻松修复，正如您建议使用的最大宽度。然而，请注意，我的答案已被反复编辑违背我的意愿。你可以在这里阅读我的原稿：嘿，我已经检查了你的解决方案，你的解决方案不适用于手机屏幕，它给出了滚动条。我的代码适用于每个设备屏幕。我共享代码视图的屏幕截图。这里是链接。您的代码视图：我的代码视图：您通过提供margin-104的解决方案不如我的完美。谢谢您的有用评论。你在我的问题定义中提出了一些我没有考虑到的优点，你似乎也在解决这些问题。实际上，我最初的方法在设计上突破了360px以下，因为我使用的是固定宽度元素，最高可达360px。此外，我接受的答案中的负边距方法阻止了轻松修复，正如您建议使用的最大宽度。然而，请注意，我的答案已被反复编辑违背我的意愿。你可以在这里阅读我的原文：