html - div右对齐不保持在顶部

Question

当中心 div 的内容非常广泛时，如何将红色框保持在最上面？当居中的 div 有很多内容时，红色的 div 转到另一行。你知道为什么会这样吗？

看看我的代码：http: //jsfiddle.net/5dC6T/3/

Answer 1

问题在于您订购<div>元素的方式。尝试：

<div>
    <div class="red-box"></div>
    <img class="photo" alt="" />
    <span>Name</span>
    <span>Data</span>
    <span>City</span>
</div>

CSS：

/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }

我对您当前的代码进行了这些修改：http: //jsfiddle.net/Wexcode/38qYS/

Answer 2

使用这个 CSS：

#QuadroEvento div.TopoEvento div.euvou{
    height: 90px;
    width: 90px;
    background-color: red;
    position: absolute;
    right: 0px;
    margin-right: 0px;
}​

关键是：position: absolute;

您也可以使用position: fixed;等，更多详细信息请参见此处：http: //www.w3schools.com/cssref/pr_class_position.asp