1. 首页
  2. 问答
  3. 父块不缩水孩子包裹

父块不缩水孩子包裹

2016-06-12 79 views
2

后是什么样子： SS父块不缩水孩子包裹

当我降低了浏览器的窗口大小，我得到： SS

但我想它喜欢这个LOOK，而无需使用Flexbox的：

SS

这里的codepen

CODE：

#one { 
 
    background-color: grey; 
 
    text-align: center; 
 
} 
 
#two { 
 
    display: inline-block; 
 
    text-align: left; 
 
    padding: 10px; 
 
    background-color: lightgrey; 
 
} 
 
.square { 
 
    display: inline-block; 
 
    width: 300px; 
 
    padding-bottom: 300px; 
 
    background-color: black; 
 
}
<div id="one"> 
 
    <div id="two"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
</div>

来源

2016-06-12 Eugene Epifanov

+0

你想要浅灰色的盒子在灰盒子里面吗？ – Roysh

+0

@Roysh，我想要黑色的方块像我张贴的第三张图片那样居中。父母div的背景颜色对我无关紧要。 –

+0

试试这个小提琴https://jsfiddle.net/gj2ub837/ – Roysh

回答

1

不使用Flexbox，你需要@media queries了点。

改变你的价值观，使其响应

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
#one { 
 
    background-color: grey; 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
    font-size: 0 /* inline-block gap fix */ 
 
} 
 
#two { 
 
    padding: 10px; 
 
    background-color: lightgrey; 
 
} 
 
.square { 
 
    display: inline-block; 
 
    width: calc((100%/3) - 10px); 
 
    padding-bottom: 300px; 
 
    background-color: black; 
 
    margin:5px 
 
} 
 
@media (max-width: 768px) { 
 
    .square { 
 
    width:calc((100%/2) - 10px) 
 
    } 
 
}
<div id="one"> 
 
    <div id="two"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
</div>

来源

2016-06-12 14:58:28 dippas

+0

哦，老兄！非常感谢！特别是对于“内联式块差距修复” - 我认为没有办法解决这个问题。 –

+1

欢迎你'：）' – dippas

+1

如果可以的话，我会把你的每一个单词都记录下来:)） –

0

试试这个，

#two { 
display: inline-block; 
    text-align: left; 
    padding: 10px; 
    background-color: lightgrey; 
    width:100%; 
} 
.square { 
    display: inline-block; 
    width: 32.5%; 
    padding-bottom: 300px; 
    background-color: black; 
}

来源

2016-06-12 15:09:49 frnt

0

下面是一个使用媒体解决方案查询codepen

* { 
 
    margin: 0px; 
 
} 
 
#one { 
 
    background-color: grey; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 
#two { 
 
    display: inline-block; 
 
    text-align: left; 
 
    padding: 10px; 
 
    background-color: lightgrey; 
 
} 
 
.square { 
 
    display: inline-block; 
 
    width: 300px; 
 
    padding-bottom: 300px; 
 
    background-color: black; 
 
} 
 

 
@media screen and (max-width: 920px) { 
 
    #two { 
 
    width: 600px; 
 
    } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    #two { 
 
    width: 300px; 
 
    } 
 
}
<div id="one"> 
 
    <div id="two"> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    <div class="square"></div> 
 
    </div> 
 
</div>

来源

2016-06-13 06:08:39

相关问题

 相关问题