html5 中的 css 文章和旁白问题

Question

这是我的代码:

<aside class="aside">
    <img src="img/agencies.png" alt="agencies" />
    <h3>From the Blog</h3>
    <p class="windows">DAVID  <i> on </i>c# Windows</p>
    <p class="hex">How to convert System.Color to HTML color (hex)?</p>
    <p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
    <a  href="#" class="view">view answer</a>
</aside>

这是我的 jsfiddle:http://jsfiddle.net/d0teo50p/

我为 article 设置了 75% 的宽度，为 aside 设置了 25% 的宽度。但是 aside 部分显示在该部分的右下角。

请查看我的 JSfiddle，并帮助我解决我的错误。

提前致谢..

Answer 1

使用 display:table 和 display:table-cell 来实现这一点。

 #section {
 display:table;
 }

.article {
width:75%;
padding-bottom: 50px;
display:table-cell;
vertical-align:top;
}

.aside{
display:table-cell;
vertical-align:top;
width:25%;  
} 

DEMO