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

您需要将媒体查询应用于左列，在移动视口中它应为50％，应为100％。您将此媒体查询应用于右侧col，但未应用于左侧。

Answer 2

您可以在左侧图像上应用自动调整或切换为100％大小。