Question

我正在创建一个通过邮件发送的html简报，这就是我走了多远：

CSS

.kasten {
    color: #000;
    display: inline-block;
    border-size: 1px;
    border-style: solid;
    border-radius: 10px;
    border-color: #493c2a;
    margin: 7px;
    padding: 0px;
    box-shadow: 0px 0px 10px #222;
    width: 300px;
    height: 300px;
    text-decoration: none;
}

HTML

<div class="kurse">
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
    <a class="kasten" href="#">
        <!-- content -->    
    </a>
</div>

问题是，这些块不会显示在一行中，而是会出现某种“颠簸”。

有谁知道如何解决这个问题？

Answer 1

您需要将其与顶部对齐

.kasten {
    vertical-align: top;
}

http://jsfiddle.net/Gh5ez/2/

Answer 2

当你说邮件时，你的意思是电子邮件？如果是这样，那么看看下面的链接。它是电子邮件中支持CSS的公会。

http://www.campaignmonitor.com/css/

Answer 3

您可以删除display：inline-block并添加float：left

.kasten {
  color: #000;
  float:left;
  border-size: 1px;
  border-style: solid;
  border-radius: 10px;
  border-color: #493c2a;
  margin: 7px;
  padding: 0px;
  box-shadow: 0px 0px 10px #222;
  width: 300px;
  height: 300px;
  text-decoration: none;
}

我使用修复

制作了jsfiddle

内联块以某种方式不会以直线显示

3 个答案: