Question

我制作了一个图形标题，我想要切片和编码。我已经计划在哪里切片图像，但我不确定如何编码它。 HERE is what the header looks like。我可以看到我如何使用两个表并排编码它，但我想知道如何使用DIV或仅仅作为一个表（不添加额外的单元格）来编码它。这对我来说很复杂，因为每个细胞的大小不同，细胞跨度也不规则。任何帮助将不胜感激！

Answer 1

如果您想在此使用div而不是tables，那么您可以使用CSS display:table属性，例如：

<div class="wrapper" style="display:table">
    <div class="c1" style="display: table-cell; width:154px; height: 34px">
        <!-- Same way you can carry put your other block starting with display:table -->
    </div>
    <div class="c2" style="display: table-cell; width:346px; height:107px">
        <!-- Same way you can carry put your other block starting with display:table -->
    </div>
</div>

我已将内联的css属性添加到演示目的中。将它们带到一个单独的文件应该可以节省一些时间！

注意：这里table和table-cell属性充当html表元素。看看这个post for more on CSS display table property

Answer 2

由于你不需要你的盒子进行缩放，我会选择一堆硬编码的高度/宽度div。这是我的意思的一个例子：

＆＃13;

.wrapper{
  font-size: 0;
  float: left;
  margin-left: 5px;
}

.a{
  height: 34px;
  width: 154px;
}

.b, .c, .d{
  display: inline-block;
  height: 106px;
}

.b{
  width:42px;
}

.c{
  width: 88px;
}

.d{
  width: 24px;
}

.e{
  height: 60px;
}

.f{
  height: 107px;
  width:346px;
}

.g, .h, .i, .j, .k{
  display: inline-block;
  height: 46px;
}

.g{
  width: 54px;
}

.h{
  width: 38px;
}

.i{
  width: 124px;
}

.j{
  width: 86px;
}

.k{
  width:44px;
}

.l{
  height: 47px;
}


.wrapper div:nth-child(1){
  background: red;
}

.wrapper div:nth-child(2){
  background: blue;
}

.wrapper div:nth-child(3){
  background: green;
}

.wrapper div:nth-child(4){
  background: yellow;
}

.wrapper div:nth-child(5){
  background: purple;
}

.wrapper div:nth-child(6){
  background: grey;
}

.wrapper div:nth-child(7){
  background: black;
}

＆＃13;

<div class="wrapper">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</div>

<div class="wrapper">
  <div class="f"></div>
  <div class="g"></div>
  <div class="h"></div>
  <div class="i"></div>
  <div class="j"></div>
  <div class="k"></div>
  <div class="l"></div>
</div>

＆＃13;

和codepen

编码网格布局

2 个答案: