Question

我会链接一张图片，但我这台电脑上没有图片gui程序。

那么，实现以下目标的最佳方法是什么？

 COLUMN 1 title     COLUMN 2 TITLE
 COLUMN 1 PIES      COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     COLUMN 2 GUITARS

当屏幕最小化时，它会变为以下结构。

 COLUMN 1 title     
 COLUMN 2 TITLE
 COLUMN 1 PIES      
 COLUMN 2 SNEAKERS
 COLUMN 1 TIRES     
 COLUMN 2 GUITARS

列基本拉链。您觉得这里最好的方法是什么，以实现我的需求？ CSS不是我的强项。 Flex订购？

Answer 1

由于您不是CSS方面的专家，我建议您使用CSS框架（如bootstrap），这将是实现您想要的最简单方法。

#page=2

您可以在此处找到有关网格布局系统的更多信息：https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

如果您想使用window.onload = setHeight window.onresize = setHeight function setHeight() { document.getElementById('app').style.height = window.innerHeight + "px" }

，可以在css中尝试此操作

＆＃13;

css-flex

＆＃13;

.box {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.part-1,
.part-2 {
  flex: 0 0 50%;
}

@media screen and (max-width:768px) {
  .box {
    flex-flow: column nowrap;
  }
}

＆＃13;

FIDDLE LINK

CSS响应两列，多行到一列

2 个答案: