我怎样才能让我的 div 和我以前的 div 兄弟姐妹一样高
How can I get my div the same height as my previous div sibling
我想让我的 div 和我之前的 div 一样高。我使用百分比表示宽度和高度(因此它在移动设备上看起来也更好。我也尝试将 parent 元素的宽度和高度设置为 100%(在一些论坛帖子中看到,但是它没有用。我也试过使用显示:table-cell,但也没有用。我的设置是这样的:
index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>SiteTitle</title>
<link rel = "stylesheet" type = "text/css" href = "styles/index.css"/>
</head>
<body>
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
</body>
</html>
index.css:
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
float: left;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu {
width: 20%;
border: 1px solid green;
float: left;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
不确定现在要检查什么..
我基本上希望 Login
link 的底部与网站标题的底部对齐。稍后我可能会将其更改为徽标图像,因此高度可能会发生变化,如果我决定多次更改它,我不想更改值。现在 Login
link 位于页面顶部。
编辑:我添加了以下代码行,但每个 div 的宽度为 50%
div#allContent div#header {
margin: 0px;
padding: 0px;
display: flex;
}
div#allContent div#header div {
flex: 1;
}
我更改了以下选择器。请注意 display: inline-block;是为了防止ie11可能出现的bug。此外,为简洁起见,我没有包含供应商前缀样式。
div#allContent div#header div {
flex: 1;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
}
试试这个代码
使用display:table-cell
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
div#allContent div#header div#shortMenu {
width: 30%;
border: 1px solid green;
display: table-cell;
vertical-align: middle;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
display: table-cell;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
width: 100%;
display: table;
}
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
使用display:flex
替换此 css 代码
div#allContent div#header div {
flex: 1 auto;
}
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
float: left;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu {
width: 20%;
border: 1px solid green;
float: left;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
display: flex;
}
div#allContent div#header div {
flex: 1 auto;
}
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
我想让我的 div 和我之前的 div 一样高。我使用百分比表示宽度和高度(因此它在移动设备上看起来也更好。我也尝试将 parent 元素的宽度和高度设置为 100%(在一些论坛帖子中看到,但是它没有用。我也试过使用显示:table-cell,但也没有用。我的设置是这样的:
index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>SiteTitle</title>
<link rel = "stylesheet" type = "text/css" href = "styles/index.css"/>
</head>
<body>
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
</body>
</html>
index.css:
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
float: left;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu {
width: 20%;
border: 1px solid green;
float: left;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
不确定现在要检查什么..
我基本上希望 Login
link 的底部与网站标题的底部对齐。稍后我可能会将其更改为徽标图像,因此高度可能会发生变化,如果我决定多次更改它,我不想更改值。现在 Login
link 位于页面顶部。
编辑:我添加了以下代码行,但每个 div 的宽度为 50%
div#allContent div#header {
margin: 0px;
padding: 0px;
display: flex;
}
div#allContent div#header div {
flex: 1;
}
我更改了以下选择器。请注意 display: inline-block;是为了防止ie11可能出现的bug。此外,为简洁起见,我没有包含供应商前缀样式。
div#allContent div#header div {
flex: 1;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
}
试试这个代码
使用display:table-cell
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
div#allContent div#header div#shortMenu {
width: 30%;
border: 1px solid green;
display: table-cell;
vertical-align: middle;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
display: table-cell;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
width: 100%;
display: table;
}
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
使用display:flex
替换此 css 代码
div#allContent div#header div {
flex: 1 auto;
}
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
float: left;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu {
width: 20%;
border: 1px solid green;
float: left;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
display: flex;
}
div#allContent div#header div {
flex: 1 auto;
}
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>