为什么我的div自身定位怪异？

山姆·贝纳

在我的计算机上，我的网站显示为

在我的手机上，

如何在手机上做到这一点，它们只能排成一排，而不会挤在一起

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  text-align: center;
  width: 30%;
  padding: 10px;
  margin-right: 30px;
  background: #FFF;
  -webkit-box-shadow: 0 1px 5px #ccc;
  -moz-box-shadow: 0 1px 5px #ccc;
  -ms-box-shadow: 0 1px 5px #ccc;
  -o-box-shadow: 0 1px 5px #ccc;
  box-shadow: 0 1px 5px #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.container {
  width: 95%;
  margin: auto;
  overflow: hidden
}

<section id="boxes">
  <div class="container">
    <div class="box">
      <!--<img src="./img/img.png>"-->
      <h3>GROWING COMMUNITY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
    <div class="box">
      <img src="86118e7a6a88f4cfd90d2c95aae8137a.png">
      <h3>CUSTOM SCRIPTS</h3>
      <redline></redline>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
    <div class="box">
      <img src="download_1_380x152.jpg">
      <h3>REALISTIC ROLEPLAY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
  </div>
</section>

根据我的经验，HTML会自动为我执行此操作，我做错了什么吗？

卡萨夫

给定使用浮点数实现此布局的方式，您可以使用媒体查询来使框具有width: 33%特定浏览器视口宽度。

对于此示例，我选择了640px作为我们的断点）。

If you think about the solution in a mobile-first way, the boxes should display as 100% width blocks by default. Only when the browser detects that the viewport has exceeded a width of 640px, the media query gets applied (and the boxes can float with a width of 33%).

By the way, don't apply any margin or padding to the boxes themselves or else they will take up more than 33% and you won't get a neat 3 column layout. Instead, apply the styles to a child of the box.

.box-inner {
  text-align: center;
  padding: 10px;
  margin: 0 10px 10px;
  background: #FFF;
  box-shadow: 0 1px 5px #ccc;
  border-radius: 3px;
}

@media (min-width: 640px) {
  .box {
    float: left;
    width: 33%;
  }
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <h3>GROWING COMMUNITY</h3>
      <p>Info about the community</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>CUSTOM SCRIPTS</h3>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>REALISTIC ROLEPLAY</h3>
      <p>Info about the community</p>
    </div>
  </div>
</div>

Of course there a now more modern approaches to achieve this type of layout in CSS that you may wish to explore.

CSS flexbox

@media (min-width: 640px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    flex: 1 1 33%;
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

CSS grid

@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

However each approach follows the same strategy. Start with boxes that are 100% width blocks. And then at a certain breakpoint, apply a media query to allow the boxes to fill the space in container in a more appropriate manner.

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-12-12

我来说两句

0 条评论

登录后参与评论

上一篇：使用具有Excel工作表数据的熊猫获取基于用户ID的数据？

TOP 榜单

文章

为什么我的div自身定位怪异？

为什么我的div自身定位怪异？

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用