html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...

我有这个代码

HTML

CSS

.head {

height:110px;

position:relative;

}

.menu {

float:left;

position:absolute;

bottom:0px;

}

.search {

float:right;

position:absolute;

bottom:0px;

}

我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"head"的右下方。

当我使用"menu"和"head"的位置和底部值时，它可以完美地对齐菜单，但是当我尝试使用"search"进行相同的操作时，它会将其放在"menu"顶部偏移一点。

这是一个图片示例

("菜单" div正确对齐，但"搜索"向左对齐，在"菜单"顶部稍高一点)

摆脱位置和底部值，仅使用float可使它们各自的边彼此对齐，但是不会将它们放在父div的底部。

我已尽其所能使它们与侧面对齐，但是"搜索" div仍然高于"菜单"(而不是底部)。

这可能是因为其中包含带有输入搜索字段的表单。

Edit1

：我发现问题是我实际上需要将搜索框对准"搜索"的底部。我尝试将其添加到.searchbox

.searchbox {

vertical-align:bottom;

}

但这不起作用，bottom：0px;也无效。

Edit2

：我找到了解决方案，因为我发现了问题所在。我必须将此代码添加到分配给输入框的类中

position: absolute;

right:    0;

bottom:   0;

现在，它运行完美。除框外，我在"搜索"中没有任何其他内容，因此使div"搜索"对齐不太麻烦，因为现在输入框与" head"对齐。感谢大家！

一个具有两个div的div左右对齐

在CSS文件中尝试一下：

.head {

height:110px;

position:relative;

}

.menu {

float:left;

position:absolute;

bottom:0px;

}

.search {

right:0px;

float:right;

position:absolute;

bottom:0px;

}

我尝试这样做，它似乎在Chrome和Firefox中对我有用。 另外，您需要倒数第二个div固定。

Codepen：https：//codepen.io/jhhboyle/pen/BZQVvO

链接到有助于底部/右侧/左侧样式的另一个线程：

将文字放在div的底部

HTML：

Content

COntent

CSS：

.head {

height:110px;

position:relative;

background-color:green;

}

.menu {

font-size:18px;

position:absolute;

bottom:0px;

background-color:red;

}

.search {

position:absolute;

bottom:0px;

right:0px;

background-color:blue;

}

修改标签很麻烦，但这只是我在这里写的一个示例。 我摆脱了CSS中的浮动元素，但搜索仍然无法移至最底部。 我认为这可能是因为它具有带有搜索框的表单。 病态细节添加到原始帖子。

这可行，但是我在搜索框上遇到了问题。 我在第一篇文章中包含了详细信息。 谢谢你的时间 ：)

您可以使用display: flex;将div对齐到左下和右下。

.head {

height: 110px;

position: relative;

display: flex;

align-items: flex-end;

border: 1px solid black;

box-sizing: border-box;

}

.menu {

font-size: 18px;

}

.menu, .search {

flex: 0 0 50%;

max-width: 50%;

border: 1px solid red;

box-sizing: border-box;

}

Menu

Search

这段代码有效，但是我的"搜索" div从底部偏移了大约10个像素。"搜索"中有一个带有输入框的表格。 没有按钮或其中有中断。

用position:absolute;创建另一个div并将两个子div放入其中。

的CSS

.box {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

border-top:1px solid;

}

.menu {

font-size: 18px;

float: left;

margin-left: 10px;

}

.search {

float: right;

margin-right: 10px;

}

的HTML

hello

bye

.head {

height: 110px;

border-radius: 2px 2px 0px 0px;

position: relative;

border: 1px solid;

}

.box {

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

border-top:1px solid;

}

.menu {

font-size: 18px;

float: left;

margin-left: 10px;

}

.search {

float: right;

margin-right: 10px;

}

hello

bye

这是获得相同结果的另一种方法

第二种方法

第三种方法

感谢您的分享，但这似乎很麻烦，添加了另一个div。 这是一种实用的方法还是草率的？

这是一种实用的方法，因为您想要底部的两个div都为我创建了一个父div。

如果您不想做以前的一个检查更新答案，我会摆弄另一种解决方案。

添加：

.menu{left:0;}

.search{right:0;}

该操作将"搜索" div移至右侧，但仍未与底部对齐。