用内容包裹垂直条

Question

我正在尝试换行内容和竖线。现在，当视口创建内容时，条形图相互远离（条形图在右边，内容在左边）但我希望他们分离到特定数量并保持这种状态。这是我的屏幕设计： enter image description here

这就是我现在的代码：

<!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

欢迎任何建议！

Answer 1

我会为此使用 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;
    }

代码笔：https://codepen.io/J-DD/pen/QErjLE

关于 flexbox 的更多信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://thenewcode.com/780/A-Designers-Guide-To-Flexbox

用内容包裹垂直条

Wrap a Vertical bar with the Content

html

css

wrapper