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媒体查询百分比宽度

回答

相关问题