Html 四列响应定义列表？

我正在尝试重新创建我使用表创建的布局，但使用

：

结果那张桌子在手机上看起来不太好。因此，我想做的是，当“公司”不能再容纳在两列中时，在“名称”下弹出“公司”

我希望每一半是容器的50%，可以将

固定为，比如说，125px。由于内容可变，

的宽度未知

以下是我得到的：

dl{
显示器：flex；
柔性包装：包装；
}
dt{
宽度：125px；
字体大小：粗体；
}
dd{
右边距：10px；
弹性：1；
}

名称
肖恩·K·南
单位
Shinyglowd公司。
家
574-202-5192
细胞
615-761-0744
电子邮件
ShawnKSouth@jourrapide.com
通讯地址
田纳西州纳什维尔市隐塘路1228号，邮编37214

dl{
显示：块；
}
dt{
字体大小：粗体；
浮动：左；
填充：0 10px；
}
dd{
浮动：无；
左边缘：25%；
}

名称
肖恩·K·南
单位
Shinyglowd公司。
家
574-202-5192
细胞
615-761-0744
电子邮件
ShawnKSouth@jourrapide.com
通讯地址
田纳西州纳什维尔市隐塘路1228号，邮编37214

在第二个代码片段中，使用flex“很好地”分发它们

我已将

flex-basis

设置为

33%

并将

flex-grow

设置为

0

，使它们连续保持3。使用媒体查询，我在

1000px

下面的一行中设置了2个，在

750px

下面的每行中设置1个。更改断点以满足您的需要

如果你需要更多的帮助，可以考虑在问题中重复你的案例

。客户详细信息表{
显示器：flex；
柔性包装：包装；
}
.客户资料项目{
弹性：1033%；
显示器：flex；
调整项目：灵活启动；
边缘底部：2px；
}
.客户详细信息标题{
字体大小：粗体；
宽度：130px；
}
.客户资料机构{
弹性：1；
}
@介质（最大宽度：1000px）{
.客户资料项目{
弹性基准：50%；
} 
}
@介质（最大宽度：750px）{
.客户资料项目{
弹性基准：100%；
} 
}

名称
XXXXX先生
单位
Foo234
细胞的
250-661-8888
家
--
电子邮件
标记+cust1075@example.ca
通讯地址
--

我只会使用

float:leftdt

和

dl

元素上使用code>，并使用

列计数为2的包装器。没有弹性或其他东西

为了使其具有响应性，在较小屏幕的媒体查询中将
列计数：
更改为
1


dl{
边际上限：0；
}
dt{
浮动：左；
清除：左；
宽度：50px；
字体大小：粗体；
}
dd{
浮动：左；
}
.包装纸{
列数：2；
}

名称
肖恩·K·南
单位
Shinyglowd公司。
家
574-202-5192
细胞
615-761-0744
电子邮件
ShawnKSouth@jourrapide.com
通讯地址
田纳西州纳什维尔市隐塘路1228号，邮编37214
我不是flex方面的专家，因此我无法在这里提供帮助，除非您想要一个与flex无关的答案。看起来你的思路是对的，但你需要内联姓名和公司，然后在屏幕宽度太小时转到块级别。@Berdesdan Yeah。。。我可能可以用一堆断点来完成，但我正在努力避免。我讨厌断点。特别是在这个布局上，因为一大堆东西都在变换，然后在中等分辨率（平板电脑？）下看起来很愚蠢。看起来它按照我想要的方式工作和流动。非常感谢。我不喜欢媒体查询，但这仍然是最好的解决方案。我认为我对
@media
查询没有感觉。但这并没有改变这样一个事实，即它们是基于各种条件应用（或不应用）CSS的本地（因此比任何其他方法都快）方式。您不必喜欢它们，但尝试用其他任何东西替代它们的功能很可能是该特定项目的一个缺点。而且替补球员的表现也不太可能更好。快乐编码！我不是这个意思。使用
列宽
，浏览器可以自动确定列数以使其适合。但列只向下流动，而不是LTR。Flex可以向下流动LTR或TTB，但不能向下流动列。不确定CSS网格是否可以用于此目的。所有这些都是本地的，但没有一个表达能力足以达到预期的效果事实上…现在我想起来了，我可以用CSS网格来实现这一点，除了IE仍然拥有约8.47%的市场份额。当有空间容纳两列时，公司应该位于屏幕截图中的名称右侧，当没有足够的空间时，应该在下方弹出。这是一个棘手的部分，让它从左到右而不是从上到下流动。