Html div右对齐不要保持在顶部

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

看看我的代码： 使用此CSS：

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

键为：

位置：绝对

您也可以使用
位置：固定等，请参见此处了解更多详细信息：
问题在于您订购
元素的方式。尝试：

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

我已对您当前的代码进行了以下修改：
您能澄清一下吗？从我所看到的，无论中央div中有多少内容，右边的鲜红色框都固定在容器顶部。那么问题出在哪里？@Utkanos尝试调整窗口大小；内容位于容器下方。当我将浏览器的大小调整为更小时，右侧的鲜红色框会下降到文本下方。这就是你想要阻止的吗？乌特卡诺斯，你是对的。这就是问题所在。事实上，我想要一个左右固定宽度和中心的三柱结构。非常好。为什么会发生这种情况？我实现了我想要的效果：从中间列中删除左浮动并更改顺序。浮动允许内容环绕它们，但只有当浮动元素出现在标记中其他元素的上方时，才会发生这种情况。
/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }