CSS媒體查詢百分比寬度

我已經下面的標記（簡化爲筆畫演示）CSS媒體查詢百分比寬度

<div id="wrapper"> 
    <div class="playlist-inner"> 
    <div class="playlist-content"> 

     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 
     <div class="playlist-item"></div> 

    </div> 
    </div> 
</div>

播放列表內容是1000像素的寬度（這是播放列表項數x的播放列表項寬度），我在JavaScript中設置。

如果有10個播放列表項，那麼寬度將是2000px。

我要實現以下目標：

包裝最大寬度爲600像素，3播放列表項是可見的（這工作）當包裝寬度爲600和400像素之間，我想播放列表的項目是33.3％播放列表內部的寬度（這是第二個上級父節點！），因此3個播放列表項目可見。當包裝寬度低於400像素寬度時，我希望播放列表項目爲播放列表內部（這是第二個上方父節點！）的50％寬度，因此2個播放列表項目可見。

我知道我可以用javascript來做到這一點。我想知道我是否可以單獨使用CSS來做到這一點？

對於當前的CSS它不工作，因爲設置33.3％的寬度取父節點的寬度，這是播放列表內容，但我希望它是播放列表內的一個更大的上級父節點的33.3％寬度。

希望有人會理解。

來源

2016-05-30 Toniq

你應該從移動和代碼。並設置包裝是相對的。

因此，從0px到劇烈，你想播放列表項目是100％;

.playlist-item{width:100%;}

從400以上，你想要50％;

@media screen and (min-width: 400px) { 
    .playlist-item{width:50%;} 
}

從600以上，你想要33.3％;

@media screen and (min-width: 600px) { 
    .playlist-item{width:33.3%;} 
}

我做了一個UL列表，例如這裏： https://jsfiddle.net/n07znakb/4/

來源

2016-05-30 21:28:43 Medda86

但這並不跟隨我的例子，我在父項單行再接着花葯母其寬度受到限制。我想在我的上級父母身上確定我的項目的大小。 – Toniq

@ Toniq我不認爲你可以從另一個父母大小的孩子，除非你做的JavaScript解決方案。你爲什麼需要內在的父母？它沒有那樣工作。只要確保您的項目的父項具有寬度並且設置爲position：relative，那麼子項只應該跟隨該父項。如果你需要內在的父母，你可能會逃避絕對的位置，讓你的孩子跟隨最親近的父母，但我不確定。我可以看到，你試圖做的事情並不遵循標準。你能解釋一下爲什麼你需要這麼激動嗎？也許你可以重寫它。 – Medda86

CSS媒體查詢百分比寬度

回答

相關問題