html - css 样式列并做出响应

Question

所以我有一个 css 编码问题。我的网站上有两个专栏部分。我让它响应。但在移动版本上，它使第一个左栏段落的大小仅调整为 50%，而不是填满整个宽度。右栏看起来很棒。

这是我在 css 代码中的内容:

列的CSS

style="position: relative; margin: .5em;"

对于左栏我有:

style="width: 50%; margin-bottom: .5em;"

而右栏我有:

rightColumn {position: absolute; top: 0; right: 0; width: 50%;}

我做错了什么让左列自己调整到整个宽度的一半？有没有办法来解决这个问题？

示例可以在 http://internetpro.org/w/ 找到

感谢帮助

Answer 1

您需要将媒体查询应用于左列，在移动视口(viewport)中它是 50%，应该是 100%。您将此媒体查询应用于右列，但未应用于左列。