如何将一个div放在另一个div中，该div位于具有float:left属性的div旁边

这个问题很令人困惑，但我只想把"signIn"css选择器放在"headerRightPanel"选择器中，并让它跨越这个宽度。现在headerRightPanel位于具有Float:left属性的headerLeftPanel旁边。由于某种原因，div中的符号扩展了整个标题，这是我不想要的。

我如何才能在headerRightPanel中保持登录并让它扩展整个部分？

html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}

.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
float: left;
width: 75%;
}
.headerRightPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">

</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
</body>
</html>

尝试以下

give.headerRightPanel浮动：右侧；位置：相对：
set.signIn最大宽度：100%

我会尝试用flex:来解决它

html {
height: 900px;
border: 2px solid black;
margin: 5px;
}
body {
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE {
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER {
border: 2px solid black;
height: 175px;
margin: 5px;
/* All children shall flex */
display: flex;
}
.headerLeftPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
width: 75%;
}
.headerRightPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
/* This item shall fill remaining space */
flex-grow: 1;
}
.signIn {
border: 2px solid black;
height: 30px;
}

<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>

将.HEADER中的display: grid;与grid-template-column: 75% auto;一起使用-表示第一列(.HEADER的第一个子元素(的宽度为(其父元素宽度的(75%，auto设置第二列(.Head的第二个子元素(填充父元素的其余宽度。

html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}

.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
display: grid;
grid-template-columns: 75% auto;
grid-gap: 5px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.headerRightPanel{
border: 2px solid black;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}

<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">

</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>

相关内容

最新更新

热门标签：