屏幕宽度小于600px时如何隐藏网页左侧列？

要实现屏幕宽度小于600px时隐藏左侧列，只需修改媒体查询规则，同时修正现有代码里的几处问题：

具体调整要点 #

• 修复原媒体查询的选择器错误：原代码里的.flex-item-left .flex-item-right是后代选择器，需改为独立选择器的写法；我们核心目标是隐藏左侧列，同时让右侧列占满宽度
• 在max-width: 600px的媒体查询中，给.flex-item-left添加display: none;属性，直接隐藏该列
• 给右侧列设置flex: 100%;，让它占满整个容器宽度
• 清理HTML里多余的</h2>标签，避免未闭合标签导致的布局错乱

修改后的完整代码 #

CSS代码 #

body {
    background-image: url(images/starsonblackredbg.jpg);
}

.flex-container {
    display: flex;
    text-align: left;
}

.flex-item-left {
    flex: 30%; /* 按照你描述的30%占比调整，原代码为20% */
    display: flex; /* 需添加flex才能生效justify-content */
    justify-content: center;
}

.flex-item-right {
    flex: 70%; /* 对应左侧的30%占比，原代码为80% */
    display: flex; /* 需添加flex才能生效justify-content */
    justify-content: flex-start; /* 标准写法替代left */
    padding: 10px;
}

/* 响应式规则：屏幕宽度<600px时隐藏左侧列，右侧列占满宽度 */
@media screen and (max-width: 600px) {
    .flex-item-left {
        display: none;
    }
    .flex-item-right {
        flex: 100%;
        padding: 0; /* 可根据需求调整内边距 */
    }
}

HTML代码 #

<div class="row">
    <div class="flex-container">
        <div class="flex-item-left">
            <img src="images/starswithpartialmask.jpg" class="img-left">
        </div>
        <div class="flex-item-right">
            <h4><u>Your Gateway to Exquisite Asian Products!</u></h4>
        </div>
    </div>
</div>

补充说明 #

• 我把你描述的30%/70%列占比修正到了CSS的flex属性中，你可根据实际需求再调整数值
• 给两个flex子项添加了display: flex;，否则justify-content属性无法生效
• 把非标准的justify-content: left改为规范的justify-content: flex-start

内容的提问来源于stack exchange，提问作者Gylenthal