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

我的佈局，看起來是這樣的：防止容器，使其子女包，而不是

<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

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

回答

相關問題