Question

我想制作更多信息＆＃34;元素出现在div内。我错过了什么吗？

HTML

<div class="aside-visitus">
     <h2> H2 </h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat</p>
    <p class="aside-caption"> <a href="#"> More information </a> 
    </p>
</div>
<div class="aside-visitus">
     <h2> H2 </h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <p class="aside-caption"> <a href="#"> More information </a> 
    </p>
</div>

CSS

.aside-visitus {
    border:1px solid black;
    margin:20px 0;
}
.aside-visitus a {
    color:#4682b4;
    float:right;
}

清晰显示方法根本不起作用。

Answer 1

最合适的是使用text-align：right propiety

http://jsfiddle.net/FelipeMartinin/MMKdz/3/

    .aside-visitus a {
        color:#4682b4;
        text-align: right;
        display: block;
     }

或者你可以给一个显示：div的表。

Answer 2

您可以将overflow:hidden添加到父元素。这将建立a new block formatting context，从而强制元素包含浮动元素。

这是必需的原因是因为父元素没有定义的高度并且子元素正在浮动。根据浮动元素的性质，它们基本上从文档流中移除;您需要重新建立块格式化上下文。

jsFiddle example

.aside-visitus {
    border: 1px solid black;
    margin: 20px 0;
    overflow: hidden;
}

或者，您可以使用clearfix执行相同的操作。这种方法有更多的支持。

Answer 3

我不会使用浮动。我将text-align:right添加到.aside-caption类。

.aside-caption
{
    text-align:right;
}

小提琴：http://jsfiddle.net/MMKdz/2/

div之后的段落链接使其向右浮动

3 个答案: