文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在小屏幕上以更多行重新排序div

问在小屏幕上以更多行重新排序div
EN

Stack Overflow用户
提问于 2016-11-04 18:11:21
回答 2查看 40关注 0票数 0

我正在为我的表格外观元素创建一个响应式设计。在宽屏幕上，我有2x3个元素(2行3列)，最大宽度为1200px。当屏幕宽度在800px和1200px之间时，我想将"table“转换为3x2 (3行，2列)，当宽度低于800px时，应该只有一列6行。下面的代码正确地显示了宽度超过1200px的2x3元素，但当屏幕尺寸较小时，它无法转换。

基本上，问题是，我应该在媒体查询中放些什么

代码语言：javascript
复制
@media screen and (max-width: 800px) {}
@media screen and (max-width: 1200px) {}

这是指向my work so far的链接。所以“运行代码”有点混乱，因为它的宽度很小。

处理这种情况的最佳方法是什么？

​

代码语言：javascript
复制
html,
body {
  height: 100%;
}
.wrapper-1 {
  display: inline;
  width: 400px;
  height: 100px;
  padding: 10px 10px;
}
.wrapper-3 {
  display: inline;
  width: 400px;
  height: 100px;
  padding: 10px 10px;
}
.left-side {
  float: left;
  width: 60px;
  height: 100px;
  margin-right: 15px;
}
.left-side > .image {
  background: url(http://placehold.it/100x100) no-repeat center center;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.right-side {
  float: left;
  width: 285px;
  height: 100px;
}
.right-side > .title {
  margin: 0;
}
.element-container {
  margin: 0 auto;
  padding: 10px;
  background-color: red;
  max-width: 1200px;
}
.element {
  margin: auto;
  display: flex;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <meta charset="UTF-8">
  <title>Title of the document</title>
</head>

<body>
  <div class="element-container">
    <div class="element">
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock</p>
        </div>
      </div>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
        </div>
      </div>

      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
        </div>
      </div>
    </div>
  </div>


  <div class="element-container">
    <div class="element">
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock</p>
        </div>
      </div>
      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
        </div>
      </div>

      <div class="wrapper-1">
        <div class="left-side">
          <div class="image"></div>
          <img src="" alt="">
        </div>

        <div class="right-side">
          <h3 class="title">HEY NOW</h3>
          <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

​

html
css
responsive-design
EN

回答 2

Stack Overflow用户

发布于 2016-11-04 18:31:12

您可以通过多种方式来实现这一点。

  • 浮动您的项目并在不同的媒体查询中更改项目宽度，以便项目宽度的总和为两列、三列、n列。
  • 使用flexbox，然后再次将项目宽度更改为，直到获得所需的列号。
  • 使用本地CSS columns

你需要简化你的标记。你想要的是这样的东西：

​

代码语言：javascript
复制
<div class="grid-container">
  <div class="grid-item">
      <div class="image">…</div>
      <div class="text">…</div>
  </div>
  <div class="grid-item">…</div>
  <div class="grid-item">…</div>
  <div class="grid-item">…</div>
</div>

​

如果您将您的标记分组成行，您将遇到明显的问题。

票数 0
EN

Stack Overflow用户

发布于 2016-11-04 18:35:27

如果可以更改行和列，则html是不正确的元素容器是主元素，所有包装器div都设置为一个元素容器

使用在1200px - 800px之间介质上使用

代码语言：javascript
复制
@media screen and (max-width: 1200px) and (min-width: 800px) {
  .wrapper-1{
    float:left;
    width:33.33%;
  }
}

当屏幕尺寸小于800px时，使用此选项

代码语言：javascript
复制
@media screen and (max-width: 800px){
  .wrapper-1{
    float:left;
    width:50%;
  }
}

HTML：

代码语言：javascript
复制
<div class="element-container">
<div class="element">
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
      </div>
    </div>
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>

    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
      </div>
    </div>
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>

    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock  </p>
      </div>
    </div>
    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>

    <div class="wrapper-1">
      <div class="left-side">
        <div class="image"></div>
        <img src="" alt="">
      </div>

      <div class="right-side">
        <h3 class="title">HEY NOW</h3>
        <p class="text">you a rock star, hey now! You are a rock star You are a rock star You are a rock star You are a rock star You are a rock star</p>
      </div>
    </div>      
</div>

​

我希望这篇文章能帮助你

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40420016

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档