如何使div的内部div响应答案

【问题标题】：How to make div's inside div responsive如何使div的内部div响应
【发布时间】：2016-01-10 19:32:33
【问题描述】：

我知道在相关主题上有数百万个类似的问题，并且我已经阅读了很多，但不知何故，我仍然不知道如何根据媒体定位 div 或不同的东西。

所以事情就是这样。我有一个 div，它有 4 个不同的 div，基本上只是 4 个不同的社交栏图片。我想让他们响应所有媒体，但最重要的是移动设备。

如果有好心人可以一步一步教我怎么做，我会很高兴的。

所以我的代码在@那一刻看起来像这样。

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;
}

这是我迄今为止尝试过的，但它似乎不起作用

@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');
}
}

这就是社交栏目前的定位方式

我们将不胜感激，谢谢你们！

【问题讨论】：

以百分比形式给出宽度和高度并给出 float:left
宽高100%？ @varunaaruru
查看fiddle
这是一个论坛，您应该在这里提出可能对其他用户也有帮助的问题 - 如果您的问题更笼统，例如“媒体查询究竟如何适用于移动设备”，请使用 MCVE 到说明问题然后我想这很好。 - 我没有说这是犯罪。就目前而言，您需要快速/肮脏的帮助来解决您当前的代码缺陷。
是的，你是对的。我试图把工作弄得脏兮兮的，那只是因为我花了最后几个小时试图弄清楚响应式的工作原理，但无法弄清楚。我猜有些人学得更快，但遗憾的是我有一个截止日期，我寻求帮助，因为它让我发疯。不，我不喜欢做肮脏的工作，我喜欢每天学习新事物，因为我离我现在想去的地方很远。别担心，我会浏览很多页面来解释响应式工作是如何工作的，因为我不喜欢把工作搁置一旁。祝你有美好的一天，新年快乐。 @NicholasKyriakides

标签： html css responsive-design

【解决方案1】：

阅读更多关于media queries 和响应式网页设计here 和here

检查fiddle

<div class="abc">
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>
<div class="bcd">
    <a href="#">
    <img class="img1" width="50" height="50"/>
    </a>
    <a><h3>Some Text</h3></a> 
</div>   
</div>


<style>
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
    .bcd
    {
        display:inline-block;
        width:49%;
    }
}
</style>

【讨论】：

@fox 如果您对媒体查询有任何疑问，请咨询我

【解决方案2】：

这是一个示例，展示了您可以如何做。

当屏幕小于 660 像素和 440 像素宽时，它有 2 个媒体查询。

还要注意它们在 CSS 中的顺序。 660px 规则在 440px 规则之前，并且即使在 440px 规则启动时仍然有效，这意味着在 660px 查询中生成的规则需要在 440px 中再次更改，如果它们应该不同的话。

使用this fiddle 并使用不同的设置，调整窗口大小，看看会发生什么。

旁注：

如果你不习惯摆弄，你可以通过拖动它们的边框来调整内部窗口的大小，这样可以很容易地测试页面是如何变化的。只需按下左上角的“运行”和/或“更新”，即可重新加载或保存最后的代码更改。

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>

【讨论】：

绝对是一个更好的解决方案 :) 非常感谢！

【解决方案3】：

你可以通过简单的 CSS 不使用媒体查询来做到这一点，试试这个

html代码

<div class="col-sm-5">
<div class="social-icons">
<a href="" target="new" title="facebook"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="facebook" /></a>
<a href="" target="new" title="twitter"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="twitter" /></a>
<a href="" target="new" title="instagram"><img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/48/Instagram-icon.png" alt="instagram" /></a>
<a href="" target="new" title="gmail" class="last"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/48/Communication-gmail-icon.png" alt="gmail" /></a>
<div class="clr"></div>
</div>
</div>

css

.social-icons a {
float: left;
margin: 0 5px 0 0;
}
.social-icons a img {
width: 29px;
height: 27px;
}
.clr {
clear: both;
}
.last {
margin-right: 0px !important;
}

【讨论】：