我正在尝试换行内容和竖线。 现在，当视口(viewport)创建内容时，条形图相互远离(条形图在右边，内容在左边) 但我希望他们分离到特定数量并保持这种状态。 这是我的屏幕设计: 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
欢迎任何建议!
最佳答案
我会为此使用 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 的更多信息:
关于html - 用内容包裹垂直条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38226568/