应用错误收集

如何使用flexbox实现这一目标

时间：2016-06-05 07:04:40

标签： flexbox

我一直在解决安排帖子类别和图片上显示的特色帖子div的问题。

精选帖子W300px H300px
分类图像W140 H140

请看一下我用过的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%;

    }

1 个答案:

答案 0 :(得分：0)

布局

内容节点

display: table-cell到每个锚。

次要容器

在3个拥有3个锚点的组中围绕div.row包裹。
在最后一组6周围包裹div.row。
为每个display: table-row

div.row

在前3组中包裹section，在最后一行包裹另一个section。

主要容器

制作#feature display: inline-block。
在3行3周围包裹section，称之为#r3c3。给它display: inline-table。
在6行的1行周围包裹section，称之为#r1c6。给它display: table。
使用main#primary包裹所有内容，为其分配display: flex，flex-flow: row wrap。

Flex Order

#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>