用内容包裹竖线

debugcn 发表于 Dev

马塞尔·舒尔茨（Marcel Schulz）

我正在尝试包装内容和竖线。现在，当视口重新创建内容时，内容栏和内容栏彼此远离（右边的栏和左边的内容），但是我希望它们分开一定的数量并保持那样。这是我的屏幕设计：在此处输入图片描述

那就是我现在的代码：

<!DOCTYPE HTML>
<body>
    <div id="wrapper">
        <div id="header">
        </div>

        <div id="navhm">
        </div>

        <div id="space">
        </div>
        <div id="wrapperres">
        <div id="pfosten">
        </div>

        <div id="contwrap">
        <div id="content">
        <p>Lorem Ipsum</p>
        </div>
        </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

那就是我的CSS http://codepen.io/Blackcan/pen/AXovrL

欢迎任何建议！

我会为此使用flexbox。

假设您的HTML如下所示：

    <div class="container">
        <div class="content-left">
            <div class="nav-fixed">
            </div>
            <div class="content">
            </div>
        </div>
        <div class="social-media">
        </div>
    </div>

然后，您可以在CSS中使用：

    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .content-left {
        flex: 0 0 60vw;
        overflow-y: scroll;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .social-media {
        flex: 0 0 20vw;
    }

    .nav-fixed {
         flex: 0 0 40px;
    }
   .content {
        flex: 0 0 300px;
    }