文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用flexbox实现这一点

问如何使用flexbox实现这一点
EN

Stack Overflow用户

提问于 2016-06-05 15:04:40

回答 1查看 45关注 0票数 0

我在安排帖子类别和图片中显示的特色帖子div时遇到了问题。

特色帖子W300px H300px

类别图像W140 H140

Screen Shot

请看一下我用过的HTML和CSS代码，但我还没有看到上面屏幕截图上的示例。

HTML

    <div class="category">

    <div><a href="#"><img class="featured" src="images/Featured-Ad.jpg"></a></div>

    <div class="Categories">
    <div class="cat1-9">
    <a href="#"><img src="images/Cars-n-Bikes.jpg" width="16.6%"  ></a>
    <a href="#"><img src="images/Electronics-n-Appliances.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Mobile-n-Tablets.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Real-Estate.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Jobs.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Home-n-Lifestyle.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Education-n-Learning.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Services.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Community&Events.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Entertainment.jpg" width="16.6%"></a>
    <a href="#"><img src="images/Restaurants.jpg" width="16.6%"></a>
    <a href="#"><img src="images/View-More.png" width="16.6%"></a>
    </div>
    </div>
    </div>

CSS

    .featured{
        width:25%;

    }

    .category{
        display: -webkit-flex;
        border:10px solid #F00;
        display:flex;
        min-height:250px;
        margin:10px;
        flex-wrap:wrap;
    }

    .cat{
        max-width:140px;
        margin:2px;
        justify-content: right;


    }

    .cat1-9{
        margin:5px;
        width:70%;

    }

flexbox

回答 1

Stack Overflow用户

发布于 2016-06-06 18:20:58

布局

内容节点

每个锚的

display: table-cell。

次要容器

在3个组中的每个组周围都包装了一个div.row，其中3个组周围有一个div.row，最后一组6个组周围有一个section。
为每个div.row
Wrapped分配了前3个组周围的一个section，最后一行上的另一个section。

主容器

使#feature
在3行中的3行周围创建了一个section，称之为#r3c3。在第1行(共6行)周围给了display: inline-table.
Wrapped一个section，称之为#r1c6。为它分配了display: table.
Wrapped、flex-flow: row wrap.

和main#primary的所有内容

Flex订单

#feature order: 1
#r3c3 order: 2
#r1c6 order: 3

代码段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>37639329</title>
<style>
*, *:after, *:before { margin: 0; padding: 0; border: 0 none transparent; box-sizing: border-box; }
#primary { display: flex; flex-flow: row wrap; width: 640px; height: 400px; margin: 0 auto; }
#feature { order: 1; display: inline-block; width: 300px; height: 300px; margin: 20px 3px 15px 11px; }
#r3c3 { order: 2; display: inline-table; table-layout: fixed; border-spacing: 5px; border: 1px solid transparent; }
#r1c6 { order: 3; display: table; border-spacing: 5px; border: .5px solid transparent; margin: -15px 0 0 0; }
.row { display: table-row; }
a { display: table-cell; width: 100px; height: 100px; }
img { display: block; }
</style>
</head>

<body>
<main id="primary">
  <section id="feature">
    <a href="#">
    <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="300" height="300">
    </a>
  </section>
  <section id="r3c3">
    <div class="row">
      <a href="#">
      <img src="http://placehold.it/100x100/000/fff?text=1">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/00f/fc0?text=2">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/302/fa6?text=3">
      </a>
    </div>
    <div class="row">
      <a href="#">
      <img src="http://placehold.it/100x100/33b/0ff?text=4">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/fff/000?text=5">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/f3f/880?text=6">
      </a>
    </div>
    <div class="row">
      <a href="#">
      <img src="http://placehold.it/100x100/840/010?text=7">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/a77/954?text=8">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/b0b/edd?text=9">
      </a>
    </div>
  </section>
  <section id="r1c6">
    <div class="row">
      <a href="#">
      <img src="http://placehold.it/100x100/ad5/73c?text=A">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/d91/e10?text=B">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/f00/fff?text=C">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/6e8/e0e?text=D">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/f07/fc0?text=E">
      </a>
      <a href="#">
      <img src="http://placehold.it/100x100/f80/07f?text=F">
      </a>
    </div>
  </section>
</main>
</body>
</html>

票数 0

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

原文链接：

https://stackoverflow.com/questions/37639329

复制

相似问题

问如何使用flexbox实现这一点
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用flexbox实现这一点EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用flexbox实现这一点
EN