html - 与样式化的元素内联的部分？

Question

我正在尝试将section元素与样式aside元素对齐。我已经尝试了 , , 的所有组合，inline但我似乎无法发生任何事情。我不明白为什么它没有按应有的方式对齐。小提琴：http: //jsfiddle.net/bmgkB/blockinline-block

从视觉上看，这是结果：

...我想（大约）在这里得到：

HTML 摘录：

<aside class="icon"><p>§</p></aside> 
    <section role="region" class="aside">
        Welcome to the Pyroneous Lair. There is a variety of features here. 
    </section>

CSS 摘录：

@charset UTF-8;

body
{
  background:#000;
  color:#FFF;
  width:90%;
  font:11px tahoma, sans-serif, serif;
  margin:auto
}

article,aside,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}

header
{
  text-align:center
}

hr
{
  border:none;
  border-top:medium double #333;
  color:#FFF;
  text-align:center;
  padding:0
}

hr:after
{
  content:"§";
  display:inline-block;
  position:relative;
  top:-.85em;
  font-size:1.5em;
  background:#000;
  z-index:2;
  padding:0 .25em
}

.icon
{
  font:45px serif, "Times New Roman", sans-serif;
  color:#000;
  border-radius:100px;
  text-align:center;
  width:70px;
  height:70px;
  background:#A60000
}

.aside
{
  margin-left:5%;
  display:inline
}

Answer 1

使 the.aside和.iconbe都成为display:inline-block（并从内部删除 the ，因为它什么都不提供..picon）

演示在http://jsfiddle.net/gaby/bmgkB/2/