html - 如何将两个 div 对齐?
问题描述
我在代码中有两个 div。我的问题是我不能在不接触列表本身的情况下将两个 div 对齐在一起。在我看来,一侧的列表会影响另一侧,从而影响对齐方式。如何对齐两个 div 以使它们保持水平?
https://jsfiddle.net/DeathAndDecay/9mdort1q/1/
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<style>
h1,
h2 {
color: #f9ff65;
text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
}
h1 {
font-size: 2.5em;
font-weight: bolder;
font-variant: small-caps;
}
h2 {
font-size: 1.8em;
font-style: italic;
font-variant: small-caps;
}
li {
font-family: sans-serif, Arial;
font-size: 1em;
text-indent: 0.6em;
}
.container {
border: 5px solid black;
padding: 15px;
margin: 16px;
position:
}
</style>
</head>
<body bgcolor="teal">
<div class="container">
<div class="container" style="display: inline-block; height: 200px">
<h2>Favorites</h2>
<ol>
<li>Dark Colors</li>
<li>Computer</li>
<li>Foods</li>
</ol>
</div>
<div class="container" style="display: inline-block; height: 200px">
<h2>Hobbies</h2>
<ol>
<li>Reading Books</li>
<li>Computer Tinkering</li>
<li>Playing Games</li>
<li>Listening to Music</li>
</ol>
</div>
</div>
</body>
</html>
解决方案
您可以使用下面的代码片段检查 flexbox 来执行此操作,并在此处了解有关 flexbox 的更多信息:Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<style>
h1,
h2 {
color: #f9ff65;
text-shadow: rgba(0, 0, 0, 0.63) 0px 3px 5px;
}
h1 {
font-size: 2.5em;
font-weight: bolder;
font-variant: small-caps;
}
h2 {
font-size: 1.8em;
font-style: italic;
font-variant: small-caps;
}
li {
font-family: sans-serif, Arial;
font-size: 1em;
text-indent: 0.6em;
}
.container {
border: 5px solid black;
padding: 15px;
margin: 16px;
display:flex;
}
</style>
</head>
<body bgcolor="teal">
<div class="container">
<div class="container" style="display: inline-block; height: 200px">
<h2>Favorites</h2>
<ol>
<li>Dark Colors</li>
<li>Computer</li>
<li>Foods</li>
</ol>
</div>
<div class="container" style="display: inline-block; height: 200px">
<h2>Hobbies</h2>
<ol>
<li>Reading Books</li>
<li>Computer Tinkering</li>
<li>Playing Games</li>
<li>Listening to Music</li>
</ol>
</div>
</div>
</body>
</html>
推荐阅读
- excel - 嵌套 For 循环停止中游
- android - Anroid RxJava2 从方法返回值
- graalvm - 如何使用 GraalVM 原生镜像编译多个 JAR
- c# - Azure LUIS API 话语 ID 太大
- org-mode - 在时钟表报告中包含日期或时间
- python-3.x - 您如何从输入按钮中找到网址(网络抓取)
- java - Comparator.comparing(...).thenComparing(...) 找出哪些字段不匹配
- go - 如何在 Gin 的 url 中添加语言前缀?
- r - R kknn 包和加权 k 最近邻计算
- php - 使用 HasOne 子关系更新父模型