CSS @用於格式化DIV內容的類似媒體的規則

我需要CSS規則，它可以動態地調整/重新格式化div的內容，以對大小進行任何更改（即使JavaScript被禁用）。可能嗎？CSS @用於格式化DIV內容的類似媒體的規則

像：

@media (min-width:600px) { div .content { column-count: 2; }} 
@media (min-width:900px) { div .content { column-count: 3; }} 
...

或東西，但對於DIV和無JS。

我需要CSS規則，它取決於DIV的大小，而不是視口/屏幕的大小......也許不像@media規則，而是改變div內容格式的東西。

來源

2017-03-02 hupapayo

你有沒有在SAS嘗試新鮮事物S' – Turnipdabeets

可能重複的[可以媒體查詢基於div元素而不是屏幕？]（http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element -instead的最屏）。我在這裏看不到一個沒有js的解決方案。 – Christoph

不重複：沒有JavaScript – hupapayo

不知道這是你在找什麼，但浮動一些div和創建一個媒體查詢，使他們的父容器的具體尺寸

HTML較小：

<div class="container"> 
    <div class="box" id="box1"></div> 
    <div class="box" id="box2"></div> 
    <div class="box" id="box3"></div> 
    <div class="box" id="box4"></div> 
</div>

CSS：

.container { 
    width: 100%; 
} 

.box { 
    height: 100px; 
    width: 100px; 
    float: left; 
    margin: 2px; 
} 

#box1 { 
    background-color: red; 
} 

#box2 { 
    background-color: blue; 
} 

#box3 { 
    background-color: green; 
} 

#box4 { 
    background-color: purple; 
} 

@media (max-width: 960px) { 
    .container { 
    width: 50%; 
    } 
}

見（調整窗口大小）：https://codepen.io/anon/pen/qrZRpZ

來源

2017-03-02 21:15:32 ByteSettlement

這是一個很好的答案。如果你看磚石類型的佈局，這大致是這樣的。 '列數'在CSS中沒有意義。 – bamabacho

但是，如果我不知道容器的大小（即使是屏幕百分比）？ p.s. JSFiddle要好得多，因爲Codepen的交叉瀏覽器兼容性要低得多，並且具有谷歌隱藏保護功能，甚至可以查看訪問權限...... – hupapayo

@hupapayo您只需單擊彈出窗口外部的空間即可關閉它，這裏是在jsfiddle上，但https ：//jsfiddle.net/90jzytxv/ – ByteSettlement

CSS @用於格式化DIV內容的類似媒體的規則

回答

相關問題