如何让div的div响应 [英] How to make div's inside div responsive
问题描述
我知道在相关主题上有数百万个类似的问题，并且我阅读了其中的很多，但不知怎的，我仍然没有真正知道如何根据媒体定位div或不同的东西。
所以就是这样。我有一个div，它有4个不同的div，基本上只有4个不同的社交酒吧图片。我希望让他们对所有媒体都有所反应，但最重要的是对移动媒体。
如果有足够的人可以一步一步地教我，怎么做，因此我的代码看起来就像是这样。
HTML
< div class =col-sm-5id =social-bar> ;
< div class =pic1>< / div>
< div class =pic2>< / div>
< div class =pic3>< / div>
< div class =pic4>< / div>
< / div>
CSS
＃social-bar
{
float：left;
display：inline-flex;
margin-top：60px;
}
.pic1
{
background：url（'../ image / facebook.png'）no-repeat;
width：29px;
height：27px;
margin-left：180px;
}
.pic2
{
background：url（'../ image / twitter.png'）no-repeat;
width：29px;
height：27px;
margin-left：20px;
}
.pic3
{
background：url（'../ image / instagram.png'）no-repeat;
width：29px;
height：27px;
margin-left：20px;
}
.pic4
{
background：url（'../ image / gmail.png'）no-repeat;
width：29px;
height：27px;
margin-left：20px;
}
这是我迄今为止所尝试过的，但它没有看起来没有工作
@media screen and（max-width：350px）{
.pic1 {
background：url（'../ image / facebook.png'）;
}
@media screen和（max-width：350px）{
.pic2 {
background：url（'../ image / twitter.png ）;
}
@media screen and（max-width：350px）{
.pic3 {
background：url（'../ image / instagram.png ）;
}
@media screen和（max-width：350px）{
.pic4 {
background：url（'../ image / gmail.png ）;
这就是社交酒吧如何定位当下
< img src =https://i.stack.imgur.com/yB1X4.jpgalt =在这里输入图片描述>
任何意见将不胜感激，谢谢各位！
$ b $ b
它有2个媒体查询，当屏幕宽度小于660px和宽度为440px时，它们会进入。
注意它们在CSS中的顺序。 660px规则出现在440px规则之前，并且即使在440px规则开始时也是有效的，这意味着如果660px查询中的规则不同，则需要在440px中再次更改660px规则中的规则。
使用并使用不同的设置进行播放，调整窗口大小并查看会发生什么情况。
附注：
如果您不习惯小提琴，您可以通过拖动边框来调整内部窗口的大小，这可以很容易地测试页面的变化。只需按左上角的运行和/或更新即可重新加载或保存上次的代码更改。
$ b
< div class =header> < div class =col> < img src =http://placehold.it/100x30/?text=logo/> < / div>< div class =col> < img src =http://placehold.it/30x30/> < img src =http://placehold.it/30x30/> < img src =http://placehold.it/30x30/> < img src =http://placehold.it/30x30/> < / div>< div class =col> < img src =http://placehold.it/60x30/?text=cart butt/> < / div>< / div>< div class =container> < div class =row> < img src =http://lorempixel.com/150/100/sports/> <跨度>一些文字...在顶部对齐< / span> < / DIV> < div class =row> < img src =http://lorempixel.com/150/100/city/> <跨度>一些文字...在顶部对齐< / span> < / div>< / div>
I know there are millions of similar questions on the related subject and i've read many of them, but somehow i still don't really get how to position div's or different things based on the media.
So here's the thing. I have a div, which has 4 different div's that are basically just 4 different social-bar pictures. I would like to make them responsive to all media, but most importantly to mobile.
If there's anyone kind enough who could teach me step by step, how to do it, ill be more than happy with it.
So my code looks like this @ the moment.
HTML
<div class="col-sm-5" id="social-bar">
<div class="pic1"></div>
<div class="pic2"></div>
<div class="pic3"></div>
<div class="pic4"></div>
</div>
CSS
#social-bar
{
float:left;
display: inline-flex;
margin-top: 60px;
}
.pic1
{
background: url('../image/facebook.png') no-repeat;
width:29px;
height:27px;
margin-left: 180px;
}
.pic2
{
background: url('../image/twitter.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic3
{
background: url('../image/instagram.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic4
{
background: url('../image/gmail.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
This is what i've tried so far, but it doesn't seem to be working
@media screen and (max-width: 350px){
.pic1{
background: url('../image/facebook.png');
}
}
@media screen and (max-width: 350px){
.pic2{
background: url('../image/twitter.png');
}
}
@media screen and (max-width: 350px){
.pic3{
background: url('../image/instagram.png');
}
}
@media screen and (max-width: 350px){
.pic4{
background: url('../image/gmail.png');
}
}
This is how social bar is positioned at the moment
Any input will be appreciated, thank you guys!
Here is a sample showing how you can do.
It have 2 media queries which kicks in when screen is less than 660px and 440px wide.
Pay attention to their order in the CSS as well. The 660px rules comes before the 440px rules, and is valid even when the 440px rules kicks in, which means that the rules made in the 660px query need to be altered again in 440px, if they should be different.
Use this fiddle and play with the different settings, resize the window and see what happens.
Side note:
If you aren't used to fiddle, you can resize the inner windows by dragging their borders, which make it easy to test how the page changes. Just push the "Run" and/or "Update" in upper left corner, to reload or save the last code changes.
html, body {
margin: 0
}
.header {
min-width: 380px;
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.header .col {
display: inline-block;
width: 33%;
}
.header .col:nth-child(2) {
text-align: center
}
.header .col:nth-child(3) {
text-align: right
}
.header .col:nth-child(1) img {
width: 100%;
height: 30px;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
vertical-align: top;
}
@media (max-width: 660px){
.header .col:nth-child(1) {
display: block;
width: auto;
}
.header .col:nth-child(2) {
text-align: left;
width: 50%;
}
.header .col:nth-child(3) {
width: 50%;
}
.header .col:nth-child(2) img {
width: 20%;
height: 30px;
}
}
@media (max-width: 440px){
.header .col:nth-child(1),
.header .col:nth-child(2),
.header .col:nth-child(3) {
display: block;
width: auto;
text-align: left
}
.header .col:nth-child(2) img {
width: 24%;
}
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="col">
<img src="http://placehold.it/100x30/?text=logo" />
</div><div class="col">
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
</div><div class="col">
<img src="http://placehold.it/60x30/?text=cart butt" />
</div>
</div>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/150/100/sports" />
<span> Some text ... being aligned at the top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/150/100/city" />
<span> Some text ... being aligned at the top</span>
</div>
</div>
这篇关于如何让div的div响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![< img src =https://i.stack.imgur.com/yB1X4.jpgalt =在这里输入图片描述>](\"https://i.stack.imgur.com/yB1X4.jpg\"){kind=link}