使用FlexBox(或其他CSS),是否有可能在每一行中有不同数量的大小相等的列(例如,不使用空div)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (183)

我正在特别寻找一个由2行组成的网格-第1行有2列,第2行有3列,其中每列/行(即网格中的项目)大小相等。它使用空div工作,但显然这不是首选的解决方案.。

我已经包含了一些基本的示例html/css来说明我的意思,但是我希望在不使用空div的情况下实现这样的目标.

CSS********************

    html, body {
      height: 100%;
      margin: 0;
    }

    .grid {
      min-height: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
    }

    .grid > div {
      display: flex; 
      flex-basis: calc(33.33% - 14px);  
      justify-content: center;
      flex-direction: column;
    }

    .grid > div > div {
      display: flex;
      justify-content: center;
      flex-direction: row;
    }

    .box { margin: 10px 0 10px 10px}
    .box1 { background-color: red; }
    .box2 { background-color: orange; }
    .box3 { background-color: blue; }
    .box4 { background-color: grey; }
    .box5 { background-color: purple; }

HTML**************

    <div class="grid">
      <div class="box box1">
        <div>
          one
        </div>
        <div>
          example content
        </div>    
      </div>
     <div class="box box2">
       <div>
         two
       </div>
       <div>
         example content
       </div> 
     </div>
     <div></div>
     <div class="box box3">
       <div>
         three
       </div> 
     </div>
     <div class="box box4">
       <div>
         four
       </div> 
     </div>
     <div class="box box5">
       <div>
         five
       </div> 
     </div>
   </div>
提问于
用户回答回答于

用之前的空间

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;
}
.container > div{
  background-color: orangered;
  height: 50px;
}
.box1{
  grid-column: 2 / 3;
}
<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>

后面的空间

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-gap: 1px;
}
.container > div{
  background-color: orangered;
  height: 50px;
}
.box3{
  grid-column: 1 / 2;
}
<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>

热门问答

两台腾讯云的服务器在同一个地区,内网网段也相同,都是172.17.0.X,为啥ping内网地址不通?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐已采纳

首先看下两台机器是否在同个vpc内,在同个vpc内默认网络可以互通,如果不在同个vpc内需要通过对等连接或者云联网打通,如果在同个vpc下无法互通,请检查下安全组和os的防火墙规则,放行icmp连接。

求问keil5项目无法下载到开发板该怎么解决?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
请检查st-link的驱动和stlink硬件,如果不行,尝试换其他stlink下载器试试,谢谢! 如果还没有解决,请加TencentOS tiny官方QQ群提问,谢谢! qq.png ... 展开详请

腾讯服务器怎么回事?怎么突然就无法连接了?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
无法登录的原因有很多,可以按照如下步骤检查: 1. 通过vnc登录,检查系统是否启动 2. 检查操作系统的防火墙iptables或windows防火墙 3. 检查安全组是否放行了登录端口和icmp 按照上述步骤排查,大部分问题都可以解决。... 展开详请

COS AndroidSDK类型说明哪里有?

rickenwang

腾讯 · 客户端开发工程师 (已认证)

推荐
GetServiceResult 这个类在 'com.tencent.qcloud:cosxml:5.4.29' 包中,简化版 'cosxml-lite:5.4.29' 没有包含GetServiceResult; 另外你说的 CosXmlService 、QCloudCreden...... 展开详请

GME Demo 用Unity 打包Internal 包 闪退?

腾讯音视频小蔡

深圳市腾讯科技 · 软件开发工程师 (已认证)

QQ:471381568
推荐

你好,发生此情况的原因大概率是没有打包GME v8a架构所导致。请检查一下打包出来的apk是否有Android v8a 的相关so文件。

只用云存储不用CDN加速,访问云存储上的内容使用的是云服务器上的流量么?这种访问收流量费么?

Lew

腾讯云对象存储 · 工程师 (已认证)

推荐

所属标签

扫码关注云+社区

领取腾讯云代金券