如何根據屏幕尺寸爲元素製作動態寬度？

這裏是我的代碼：如何根據屏幕尺寸爲元素製作動態寬度？

.container{ 
 
    border:1px solid; 
 
    width: 70%; 
 
} 
 

 
.el { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    min-width: 250px; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

請運行該代碼段中，點擊全頁面按鈕，調整頁面大小。我想分div.container等分。

所以如果連續有三個元素（div.el），那麼它們的width應該是33%。如果連續兩個元素，那麼width應該是50%。

我該怎麼做？注意到我不想使用任何像Bootstrap這樣的框架。

來源

2017-07-06 Martin AJ

最好的解決方案是使用bootstrap。它會爲你節省很多時間。 – Nicolas

唯一的方法是使用具有適當回退的CSS網格。否則，你的寬度決定你每行有多少元素，反之亦然。 –

，看一下使用Media Queries

例子：

// Foo's original width is 100% 
.foo { 
    width: 100% 
} 

@media screen and (max-width: 100px){ 
    // Foo's width will be 50% when the view's width is below 100px 
    .foo { 
     width: 50% 
    } 
} 

... OR ... 

@media screen and (min-width: 100px){ 
    // Foo's width will be 50% when the view's width is over 100px 
    .foo { 
     width: 50% 
    } 
}

來源

2017-07-06 14:39:29

嘗試使用CSS彈性盒。爲您的容器應用display:flex;屬性，並使用flex-grow: 1;操縱容器內部的項目.el，以便將它們伸展到屏幕的剩餘寬度並相應地分享空間。

.container{ 
 
    display: flex; 
 
    width: 70%; 
 
    border: 1px solid black; 
 
} 
 
.el { 
 
    border: 1px solid red; 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

CodePen例如：https://codepen.io/CapySloth/pen/LLBgEB

來源

2017-07-06 14:40:31

.container{ 
 
    border:1px solid; 
 
    width: 70%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 
.el { 
 
    border: 1px solid red; 
 
    min-width: auto; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="el">one</div> 
 
    <div class="el">two</div> 
 
    <div class="el">three</div> 
 
    <div class="el">four</div> 
 
    <div class="el">five</div> 
 
    <div class="el">six</div> 
 
    <div class="el">seven</div> 
 
    <div class="el">eight</div> 
 
</div>

來源

2017-07-06 14:42:04 Dij

鑑於我這個做我自己，我幾乎完全某些最好的辦法是實現Flexbox的flex-wrap到使項目溢出d flex-grow，以使它們佔用儘可能多的空間。

<div id="cont"> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
    <div>asdf</div> 
</div>

#cont { 
    display: flex; 
    flex-wrap: wrap; 
} 

#cont div { 
    flex-grow: 1; 
    background: red; 
    padding: 10px; 
    margin: 10px; 
}

見here，或my own website。

請注意，這不是一個網格系統，所以最後一行不會像以前的所有列一樣（全部）。如果您希望單元格在可用空間溢出並且看起來像給出最後一行的網格時，則需要添加一些JavaScript。

來源

2017-07-06 15:06:38 JackHasaKeyboard

如何根據屏幕尺寸爲元素製作動態寬度？

回答

相關問題