Html 对齐徽标、标题和菜单

如何在一行上对齐徽标、标题文本和菜单，徽标左对齐，标题文本和菜单右对齐？我看到的大多数答案都是针对两个元素（例如，徽标和菜单）

例如，在下面的示例中，图像div和文本div应该向左对齐（它们对齐），菜单div应该向右对齐（不对齐）。它们也应该垂直对齐（菜单div没有）。另见

---

CSS中缺少类的点符号

而不是

.header menu {
    float:right;
}

写

---

另外，如果您希望

.text

和

.image

与

.menu

位于同一行，只需将

float:left

添加到这两个…

您的CSS中缺少类的点符号

而不是

.header menu {
    float:right;
}

写

---

另外，如果您希望

.text

和

.image

与

.menu

位于同一行，只需将

float:left

添加到这两个…

您可以更改为使用

menu

div上的

位置：absolute

，然后设置

right:0；底部：0

，这将使

菜单

最右和最底部对齐

.header {
    position: relative;
}

.header .menu {
    position: absolute;
    right: 0;
    bottom: 0;
    border:2px solid green;
}

---

您可以更改为使用

菜单

div上的

位置：绝对

，然后设置

右侧：0；底部：0

，这将使

菜单

最右和最底部对齐

.header {
    position: relative;
}

.header .menu {
    position: absolute;
    right: 0;
    bottom: 0;
    border:2px solid green;
}

---

为了使设计更加流畅，您可能希望将来使用display:table cell而不是float:）。这看起来是一个有趣的选择。我会看一看，也看看它是否能更好地处理垂直对齐的标志，文字和文字menu@callum-表格单元格选项适用于三张表格，再次感谢。一个问题是我不能右对齐最右边表格单元格中的文本（）这里的问题是因为您浮动菜单项-如果您将“display:inline block”添加到菜单类，这是您希望的^^。为了实现更流畅的设计，您可能希望在将来使用display:table cell而不是float:）。这看起来是一个有趣的替代方案。我会看一看，也看看它是否能更好地处理垂直对齐的标志，文字和文字menu@callum-表格单元格选项适用于三张表格，再次感谢。一个问题是我不能右对齐最右边的表格单元格中的文本（），这里的问题是因为您正在浮动菜单项-如果您将“display:inline block”添加到您的菜单类中，这将按照您希望的方式工作^^。谢谢，这是一个草率的错误，也是一个简单的解决方案：-）。但是，现在所有区域都与顶部对齐，垂直对齐：底部不起任何作用。有什么想法吗？@Paulo vertical align属性在

display:block上不起作用，谢谢，这是一个草率的错误，也是一个简单的解决方案：-）。但是，现在所有区域都与顶部对齐，垂直对齐：底部不起任何作用。有什么想法吗？@Paulo vertical align属性在
显示：block
@Paulo您选择了第一个答案，kosturko的答案，作为最佳答案，我脑子里有一个问题，它是如何解决您的问题的？菜单甚至没有对齐，对吗？我说得对吗？我问这个是因为我一直在想这个所以我问你。。别介意。我接受了它，因为它解决了最初提出的问题。我只是在之后才意识到/遇到了其他问题。但事实上，你和Kosturkos的回答都很有帮助，对此我表示感谢。我还在考虑Callum的建议，这看起来很吸引人，但我还没有时间去尝试。@Paulo你选择了第一个答案，kosturko的答案，作为最佳答案，我心里有一个问题，它是如何解决你的问题的？菜单甚至没有对齐，对吗？我说得对吗？我问这个是因为我一直在想这个所以我问你。。别介意。我接受了它，因为它解决了最初提出的问题。我只是在之后才意识到/遇到了其他问题。但事实上，你和Kosturkos的回答都很有帮助，对此我表示感谢。我还在考虑Callum的建议，这看起来很有吸引力，但我还没有时间去尝试。
.header {
    position: relative;
}

.header .menu {
    position: absolute;
    right: 0;
    bottom: 0;
    border:2px solid green;
}