-1

我正在创建一个要通过邮件发送的 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>

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

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

4

3 回答 3

4

您需要将其与顶部对齐

.kasten {
    vertical-align: top;
}

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

于 2013-08-21T18:02:54.790 回答
1

当您说邮件时，您是指电子邮件吗？如果是这样，请查看下面的链接。它是电子邮件中 ​​CSS 支持的公会。

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

于 2013-08-21T18:46:09.817 回答
0

您可以删除 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

于 2013-08-21T18:00:07.583 回答