Html 动态地将ul从水平更改为垂直

可能是一个重复的问题，但我没有找到任何解决这个问题的方法

我有一个

div

元素（我们称之为

master

），对它没有控制权。
因此，我无法修改其宽度或高度

在它里面，我有另一个

div

（我们称它为

container

），我可以控制它。
在这个

div

中，我有3个

ul

元素，每个元素都有240px

我的愿望是：

如果

主控

小于720px（每个

ul

的240px乘以

ul

的数量），我想垂直显示

ul

元素（一个在另一个之上）。
但是如果

master

的像素大于720px，我想水平（并排）显示

ul

元素

除此之外，我希望我的

容器

元素具有适合其

ul

子元素的最小宽度

这是否可以只使用css/html

我已经尝试使用flex、float和tables，但没有成功…
我想帮忙

来说明我的愿望：

div.master {
  background-color: gray;
  width: 720px;  /* I have no control over this. But this value can different (360, 1080 and so on) */
  height: 405px; /* I have no control over this. But this value can different (270, 607 and so on) */
}

div.container {
  background-color: red;
  max-height: 250px;
  overflow: auto;
  display: inline-block;
  min-width: 320px;
  max-width: 760px;
  /* we can add other attributes here */
}

ul.list {
  background-color: green;
  width: 240px; /* I have control over this element, but this value cannot be changed */
  height: 150px; /* I have control over this element, but this value cannot be changed */
  padding: 5px 5px 5px 5px; /* I have control over this element, but this value cannot be changed */
  /* we can add other attributes here */
}

灰色框是

master

元素。
红色的是

容器

绿色的是

ul

元素。

更新的fiddle:

您可以对ul元件使用

float:left

。
此外，您还必须注意填充的宽度（由于填充为5px，所以将其减少为230px）。
还将容器

overflow:auto

更改为

overflow-y:auto

希望这有帮助

更新的css:

div.master {
  background-color: gray;
  width: 720px;  /* I have no control over this. But this value can different (360, 1080 and so on) */
  height: 405px; /* I have no control over this. But this value can different (270, 607 and so on) */
}

div.container {
  background-color: red;
  max-height: 250px;
  overflow: auto;
  display: inline-block;
  min-width: 320px;
  max-width: 760px;
  /* we can add other attributes here */
}

ul.list {
  background-color: green;
  width: 240px; /* I have control over this element, but this value cannot be changed */
  height: 150px; /* I have control over this element, but this value cannot be changed */
  padding: 5px 5px 5px 5px; /* I have control over this element, but this value cannot be changed */
  /* we can add other attributes here */
}

更新的小提琴：

您可以对ul元件使用

float:left

。
此外，您还必须注意填充的宽度（由于填充为5px，所以将其减少为230px）。
还将容器

overflow:auto

更改为

overflow-y:auto

希望这有帮助

更新的css:

div.master {
  background-color: gray;
  width: 720px;  /* I have no control over this. But this value can different (360, 1080 and so on) */
  height: 405px; /* I have no control over this. But this value can different (270, 607 and so on) */
}

div.container {
  background-color: red;
  max-height: 250px;
  overflow: auto;
  display: inline-block;
  min-width: 320px;
  max-width: 760px;
  /* we can add other attributes here */
}

ul.list {
  background-color: green;
  width: 240px; /* I have control over this element, but this value cannot be changed */
  height: 150px; /* I have control over this element, but this value cannot be changed */
  padding: 5px 5px 5px 5px; /* I have control over this element, but this value cannot be changed */
  /* we can add other attributes here */
}

---

当然这是可能的，你有没有看过引导？查看他们的网格系统>我认为您需要JS来检测主div的宽度。使用

flex

和

flex wrap

您可能会得到close@fauverism是的。但不幸的是，我无法使用它，因为我正在创建一个插件，而引导程序无法使用…@ovokuro我尝试使用

flex

和

flex-wrap

，但是我无法使

容器

元素具有适合其子元素的最小宽度。您可以从引导复制属性并将其应用于您的元素。确实可以，您是否查看过引导？查看他们的网格系统>我认为您需要JS来检测主div的宽度。使用

flex

和

flex wrap

您可能会得到close@fauverism是的。但不幸的是，我无法使用它，因为我正在创建一个插件，而引导程序无法使用…@ovokuro我尝试使用

flex

和

flex-wrap

，但是我无法使

容器

元素具有适合其子元素的最小宽度。您可以从引导复制属性并将其应用于您的元素。非常感谢您的帮助！但这种解决方案仍然不能满足“使

容器

具有最小宽度以适应

ul

元件”的要求。因此，当

master

div较小时，

ul

元素和滚动条之间的空间过大…@LucasCosta检查更新的小提琴是否有用。我为容器添加了文本align:center，并从列表项中删除了float属性。还向列表项添加了disaply:inline块。我不确定您是否支持所有宽度组合，如果支持，我认为我们必须使用媒体查询来正确绘制布局感谢您的帮助！但这种解决方案仍然不能满足“使

容器

具有最小宽度以适应

ul

元件”的要求。因此，当

master

div较小时，

ul

元素和滚动条之间的空间过大…@LucasCosta检查更新的小提琴是否有用。我为容器添加了文本align:center，并从列表项中删除了float属性。还向列表项添加了disaply:inline块。我不确定您是否支持所有宽度组合，如果支持，我认为我们必须使用媒体查询来正确绘制布局