Question

我正在尝试包装内容和竖条。现在，当Viewport增加内容并且条形图彼此远离时（右边的条形图和左边的内容条形图）但是我希望他们分开一定数量并保持这样的状态。这是我的Screendesign： 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;
    }

Codepen：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

用内容包裹垂直条

1 个答案: