Question

我正在设计一个类似于表格的div集群。只有两行。

“表格”的构建方式如下：

<div class="artist_meta_first_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>
<div class="artist_meta_second_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>

相当简单吧？这里有样式：

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 190px;
      }

.artist_meta_second_row div{
        display: inline-block;
        min-width: 190px;
        vertical-align: top;
      }

我遇到的问题是第一行div中的文本在右边比第二行div中的文本开始多一点。它几乎看起来在第一行中有一些填充 - 但是在css代码中没有。经过大量的反复试验后，我发现它是由于第一行中的letter-spacing: 3px; - 它似乎使第一行中的div更宽一些，导致第一行和第二行中的单元格即使我指定了宽度，也不要很好地对齐。

有什么方法可以正确对齐两行而不必去除字母间距？

Answer 1

我自己找到了一种方法 - 因为我指定了两行中每个div的宽度，我只是减去了字母间距从第一行中div的宽度中取出的三个像素。现在，第一行和第二行中列的开头正确对齐。

这是工作代码：

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 182px; /* notice 185 - 3 = 182 */
      }

      .artist_meta_second_row div{
        display: inline-block;
        min-width: 185px;
        vertical-align: top;
      }

Answer 2

复制粘贴这个，应该修复：

<div class="artist_meta_first_row">
    <div>some text</div><div>
    some text</div><div>
    some text</div><div>
    some text</div><div>
    some text</div>
</div>
<div class="artist_meta_second_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>

演示：http://jsfiddle.net/FdRt5/

请参阅此处原因：How do I remove extra margin space generated by inline blocks?

字母间距似乎使div移动

2 个答案: