0
私は "Fluid Layers"で再生しようとしていますが、ウィンドウのサイズを変更するとき(手動でその幅のサイズを変更する)、div:そうする(単に機能しない)。液体レイヤー - 表示:なしdoes not work
18行目のdisplay:noneが動作しない理由を教えてください。さらに、3つのブロックをコンテナの中に集中させたいときにDIVSを使用する必要がありますか?あなたは私のために良いアイデアを持っていますか?
知っていれば、Liquid Layersを実装するためのより良い/異なるアイデアを得ることができます。ご協力ありがとうございました。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #FFFFFF;
}
/* Extra small devices (phones, up to 480px) */
@media (max-width: 480px)
{
body
{
background-color: #FFFFFF;
}
.col3 { display: none; }
}
/* Extra small devices (usually phones from 480px to 768px) */
@media (min-width: 481px) and (max-width: 767px)
{
body
{
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px)
{
body
{
background-color: #444;
}
}
/* Small devices (tablets/desktop, 768px and up) */
@media (min-width: 992px) and (max-width: 1199px)
{
body
{
background-color: green;
}
}
/* large desktops and up ----------- */
@media (min-width: 1200px)
{
body
{
background-color: lightblue;
}
}
</style>
</head>
<body>
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline- block">Text</div>
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
</div>
</body>
</html>
表示:なし; } ' - https://jsfiddle.net/4uknmLe2/1/ – ASR