Question

快速概述

我目前正在处理一个页面，该页面总共有三列，从左到右依次是：

项目列表
代码详细信息
代码窗口

现在，Project List和Code Details在max-width中各有一个600px，但在移动设备上的显示顺序应为{{1} }-> 100%-> Code Details，在桌面上时，这三个都应适合页面。这是一个繁琐的任务，但是我快到了，我只是觉得我错过了一些东西。

此外，这并非与本篇文章完全相关，但我还在使用Bootstrap 4，它可能会或可能不会影响解决方案的实施方式（目前我没有看到任何原因，但包括这个只是为了以防万一）。

问题

默认情况下，我需要Project List和Code Window折叠，并且Project List应该全角折叠。然后，如果显示Code Details或Code Window，则Project List应该填充右边的所有剩余空间。这类似于Google过去处理their maps的方式。

我尝试了几种方法，最近的方法是为左侧的两列创建一个容器，然后将Code Details和Code Window放在左侧的容器中，然后将{ {1}}的宽度为Project List。

我在左侧容器上同时使用Code Details和Code Window和100%（在子容器上使用它可能是一个问题，但是删除它并不能解决问题），和float: left上的Project List。

Code Details

width: 100%

通过此设置，左列彼此重叠，而不是在桌面上并排堆叠。我希望它们在移动设备上重叠，但在台式机上不重叠。您可以在上面的示例中清楚地看到这种效果。

问题

如何保留填充剩余宽度的功能，并在从左侧堆叠Code Widnow元素以在桌面上显示左侧面板时防止重叠？以后我可以照顾好移动设备友好型用户，但我想我最终在这一方面有了隧道视野。

Answer 1

您可以通过在代码窗口元素上应用flex-grow: 1来实现。如果您折叠项目列表，代码详细信息或两个代码窗口都将占用剩余空间。

使用媒体查询，您可以删除移动设备的display: flex和max-width: 200px属性，以使其具有全宽。

.main-content {
    display: flex;
}

.project-list {
    background-color: #FF3333;
    max-width: 200px;
}

.code-details {
    background-color: #3377FF;
    max-width: 200px;
}

.code-window {
    background-color: #55CC77;
    flex-grow: 1;
}

<div class="main-content">
    <div class="project-list">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
     </div>

    <div class="code-details">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
    
    <div class="code-window">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
</div>

Answer 2

.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
}

.main-content>div{
    padding: 12px;
}

.project-list {
    background-color: #F33;
}

.code-details {
    background-color: #37F;
}

.code-window {
    background-color: #5C7;
}

<div class="main-content">
    <div class="project-list">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
     </div>

    <div class="code-details">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
    
    <div class="code-window">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
    </div>
</div>

具有两个可折叠左导航的三列布局

快速概述

问题

问题

2 个答案: