防止容器，使其子女包，而不是

我的布局，看起来是这样的：防止容器，使其子女包，而不是

<div class="left"> 
    ... 
</div> 

<div class="right"> 
    <div class="inner" /> 
    ... a bunch of these ... 
    <div class="inner" /> 
</div>

CSS：

div { display: inline-block; } 
.left { width: 25%; } 
.right { width: 75%; } 
.inner { width: 33%; }

我要做到以下几点：

当屏幕是正常尺寸：

+--+-----+ 
| |O O O| 
| |O O O| 
+--+-----+

我想，当我减少浏览器的宽度会发生什么：

+--+---+ 
| |O O| 
| |O O| 
| |O O| 
+--+---+

实际发生的：

+--+ 
| | 
| | 
+--+ 
+-----+ 
|O O O| 
|O O O| 
+-----+

如果我进一步缩小浏览器：（我也想避免这种情况）

+--+ 
| | 
| | 
+--+ 
+---+ 
|O O| 
|O O| 
|O O| 
+---+

这是可行的吗？

来源

2017-04-17 humodz

这会给你一个更好的结果，我希望。

div { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
.left { 
 
    width: 25%; 
 
    float: left; 
 
} 
 

 
.right { 
 
    width: 75%; 
 
    float: right; 
 
} 
 

 
.inner { 
 
    width: 33%; 
 
}

<div class="left"> 
 
    ... 
 
</div> 
 

 
<div class="right"> 
 
    <div class="inner" /> ... a bunch of these ... 
 
    <div class="inner" /> 
 
</div>

来源

2017-04-17 03:08:08 CodeMonkey

更少的代码/工作比我Flexbox的建议。如果您不需要其他Flexbox功能，这是一个不错的选择。 –

是的，如果他想坚持简单的代码。你的选择也会很好。我想向他推荐关于[Flexbox完全指南]的教程（https://css-tricks.com/snippets/css/a-guide-to-flexbox/） – CodeMonkey

我做了一个flexbox，但这是一个不错的回答:) –

是的，你可以用Flexbox的做到这一点。

HTML

<div class="parent"> 
    <div class="left">Some Stuff</div> 
    <div class="right">Some other stuff</div> 
</div>

CSS

.parent { 
    display: flex; 
    height: 100vh; 
    width: 100vw; 
} 

.left, .right { 
    flex: 1 1 auto; 
    border-color: black; 
    height: 100%; 
    width: 100%; 
} 

.left{ 
    background-color: red; 
} 
.right{ 
    background-color: blue; 
}

工作代码笔这里https://codepen.io/seekheart/pen/BRNrER

来源

2017-04-17 03:11:12

防止容器，使其子女包，而不是

回答

相关问题