Question

我正在尝试将页面的标题排除在外，以便它看起来像这样：

layout example

我想避免使用表格，如果可行的话。我是html和css beginer co我无法让它工作：（。

这是我迄今为止最好的尝试：

HTML：

<div class="rightAlign" >
    <div class="notificationArea">
        <img src="../bigHeaderImage.png" />
    </div>
    <div>
        <div>
            <img src="../smallImage.png" />Some info<br/>
            Other info  
        </div>
        <div>
            <div class="ignoreRightAlign">
                <a href="#" >Menu1</a>
                <a href="#" >Menu2</a>
            </div>
            <a href="#" >Menu3</a>
        </div>
    </div>
</div>

CSS：

.rightAlign
{
    clear: both;
    text-align: right;
}
.ignoreRightAlign
{
    float: left;
}

它无法正常工作：菜单行不在底部与“大标题图片”的底部对齐。

感谢您提供任何帮助，想法和建议

Answer 1

要使菜单与大图像的底部对齐，尽管您需要将菜单项绝对放在相对父级中。我已经简化了一下，但这里有必要的部分来实现它：

<html>
<head>
    <title>test</title>
    <style type="text/css" media="screen">

        .right
        {
            float: right;
        }
        .header
        {
            position: relative;
        }
        .menu
        {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 250px;
        }
        .info p
        {
            float: right;
        }
        .rightHeader
        {
            float: right;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="bigimage.png" />
        <div class="rightHeader">
            <div class="info">
                <img src="smallimage.png" /><p>Some info <br /> Other info</p>
            </div>
            <div class="menu">
                <a href="#" class="right">Menu 3</a>
                <a href="#">Menu 1</a>
                <a href="#">Menu 2</a>
            </div>
        </div>
    </div>

</body>
</html>

Answer 2

W3 visual formatting model也非常适合学习CSS布局的工作原理。

此外：你有没有尝试过CSS“职位”？

.smallPicture
{
position: absolute; //Or relative (among other options)
right: 15px; //Or whatever it needs to be
top: 0; // Can be in ##px or ##em or %
}

如何使用html和CSS布局所需的设计？

2 个答案: