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

Answer 2

从代码中更改此样式

#header h1
{
    float:left;
}

到

#header h1
{
    clear:both;
}

并将float:left添加到aside和article。这些修复应该解决对齐问题。

演示：http://jsfiddle.net/d0teo50p/3/

css文章和html5中的问题

2 个答案: