Html 我怎样才能让我的div对手机更灵敏？

如何让我的“会见我们的员工”页面对电话更具响应性？它看起来不太好，所有的项目都放在左边，还有很多内容可以在右边使用

我没有尝试太多，因为我真的不知道我能做什么

代码笔在这里：

CSS:

HTML

奥UNRP
管理员
消息
奥UNRP
管理员
消息
奥UNRP
管理员
消息

您可以在3个div周围添加一个wrapper元素，比如一个section，其中包含一个bg-white类。添加“文本对齐：居中”样式，将3.bg白色div置于其节容器内的中心

然后，添加一个允许您在特定屏幕/设备宽度设置.bg白色div样式的。让我们选择640px的任意宽度

在此断点处，您可以将.bg白色div的宽度从原来的180px更改为100%，并使其显示：block而不是display:inline block，以便它们占据页面的整个宽度，并且每个div都位于自己的行上

这些是您需要进行的CSS更改，以使此工作正常进行

.bg-white {
  background-color:white;
  height: 216px;
  border: 1px solid #ddd;
  width: 180px;
  display: inline-block;
  margin-top:20px;
  margin-right:20px;
  /* float: left; */
 }

section {
  text-align: center;
}

/* place at the bottom of your CSS file, after all other rules */
@media (max-width: 640px) 
{
  .bg-white {
    width: 100%; 
    display: block;
  }
}

别忘了把你的3.bg白色div包装在一个节容器中，这样你就可以把它们放在这个父容器的中心

---

这些更改将为您提供3.bg白色div，当您的用户在其计算机/笔记本电脑上查看您的站点时，这些div将集中在其父容器中，并在移动设备上显示相同的标记，但具有不同的移动优化样式（由于媒体查询样式在设备宽度时会被选择，因此您可以使用媒体查询使html更具响应性。在手机中加载站点时，使用屏幕宽度调整“背景白”，如“左边距：10%；宽度：90%”（您在css中设置屏幕大小）

查看更多信息：

使用flex

代码笔：

JS小提琴

@介质（最大宽度：400px）{
.bg白色{
宽度：100%！重要；
}
}
.集装箱{
宽度：100%；
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.bg白色{
背景色：白色；
高度：216px；
边框：1px实心#ddd；
利润率：10px；
宽度：200px；
}
.用户名{
颜色：黑色；
字号：900；
}
.工作空间{
字体大小：11px；
颜色：#999；
}
.联系方式{
背景色：#1798e5；
显示：内联块；
边缘顶部：12px；
颜色：白色；
边界半径：.3em；
填充：6px 10px；
字体大小：13px；
文本对齐：居中；
}
.图标{
字体大小：16px；
边缘顶部：20px；
}
.联系人：悬停{
背景色：#1765e5；
光标：指针；
}
.化身1{
边界半径：999px；
左边距：自动；
右边距：自动；
位置：相对位置；
边框：5px纯白；
宽度：90px；
高度：90px；
}

奥UNRP
管理员
消息
奥UNRP
管理员
消息
奥UNRP
管理员
消息
奥UNRP
管理员
消息
奥UNRP
管理员
消息
奥UNRP
管理员
消息

您可能需要查看Remove float:left from.bg white。此外，媒体查询需要在您的其他CSS规则之后。更新答案。您希望在您的其他CSS规则之后添加媒体查询，以便浏览器在假定查询条件的情况下，最后读取和解释查询中的规则您通常希望在给定样式表的最底部添加这些。

<div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
--><div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
--><div class="bg-white">
  <center>
  <img src="http://cdn.edgecast.steamstatic.com/steamcommunity/public/images/avatars/68/68d720a786c605ff0cc4d80f10a4c2d6410bb2fc_full.jpg" class="avatar1">
  <div class="username">
    audunrp <i class="fa fa-check-circle" aria-hidden="true" style="color:#5EA5E7;"></i>
  </div>
  <div class="workspace">
     Administrator
    </div>
    <div class="contact" data-target="#audn-contact" data-toggle="modal">
        <i class="fa fa-envelope" aria-hidden="true"></i> Message
      </div>
  </center>
</div>
<!--
audn
-->

.bg-white {
  background-color:white;
  height: 216px;
  border: 1px solid #ddd;
  width: 180px;
  display: inline-block;
  margin-top:20px;
  margin-right:20px;
  /* float: left; */
 }

section {
  text-align: center;
}

/* place at the bottom of your CSS file, after all other rules */
@media (max-width: 640px) 
{
  .bg-white {
    width: 100%; 
    display: block;
  }
}