包装内容的垂直栏

我试图包装内容和垂直栏。现在，当视口增加内容和酒吧彼此移开（酒吧在右边，内容在左边）但我希望他们分开到一个特定的数量，并保持这样的状态。这是我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

有何意见，欢迎！

来源

2016-07-06 Marcel Schulz

我会为此使用flexbox。

比方说，你的HTML看起来像这样：

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

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

然后，你可以在你的CSS使用https://codepen.io/J-DD/pen/QErjLE

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

来源

2016-07-06 14:45:28

我看到，这似乎很不错，就像我想要的。但箱子“规模”了吗我看到的权利？就像使用木质纹理会产生问题的宽度变化 –

是的，这是可能的。盒子的宽度设置为'flex：0 0 20vw'。 20vw表示视口宽度，因此当您的浏览器缩放时，这些框会随之缩放。你也可以设定一个固定值。只需编辑20vw。例如：'flex：0 0 30px'。您应该更改'.content-left'和'.social-media'以禁用缩放。 –

哦，我明白了！非常感谢你，我会用那个！非常感谢你:) –

包装内容的垂直栏

回答

相关问题