使用html/css在移动设备上堆叠带有图像的表格

这是一个全新的功能，它有一个两列按钮（某种类型），一个是彩色背景，一个是文本，另一个是图像（也是链接）

我还想把它放在手机上。我已经成功地使用了在这里找到的其他代码片段，但我不能完全正确地使用它——主要是我的“按钮”的左侧没有填满整个部分

可能有一个非常简单的解决方案，但我现在似乎找不到

*{
框大小：边框框；
}
.栏目{
浮动：左；
宽度：50%；
对齐内容：居中对齐；
}
.行{
最大宽度：280px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
}
}

一些文字

您可以花几个小时摆弄各种html/css设置，也可以花20分钟做一个教程，介绍这一点和其他几个方面

对于非常简单的移动设备，请看一下Bootstrap。这是一个可以让你开始的方法。基本上，引导只需要在页面顶部引用一些文件，瞧，你有一些非常酷的功能。如果您在每一页的顶部引用（复制如下），您将可以访问所有超级简单的引导奇妙功能，这些功能将自动为您处理不同的屏幕大小

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

另外，另一个值得注意的事情是Flexbox——它值28分钟的每一秒

---

最后，查看CSS网格。对不起，我没有一个好的参考资料给你，但是很容易找到一些好的参考资料。

我会使用flex而不是float（优点是你可以得到等高的列）：

*{
框大小：边框框；
}
.栏目{
宽度：50%；
}
.column>img{
宽度：100%；/*只会使图像按列调整大小*/
显示：块；/*删除图像下方的空间*/
}
.行{
最大宽度：280px；
显示：flex；/*使用flex而不是float*/
}
@媒体屏幕和屏幕（最大宽度：600px）{
.行{
柔性方向：列；/*将柔性方向更改为小屏幕大小的列*/
}
.栏目{
宽度：100%；/*使列全宽*/
}
}

一些文字

太好了，谢谢！这似乎已经完成了现在的把戏-现在玩，使整个左侧链接和定位文本。希望我自己能解决这个问题：）