html - 如何将两个元素并排放置
问题描述
我遇到的问题是这两个元素mafia
并vampire
没有正确对齐。我能够保留mafia
元素的属性,使其看起来像一个盒子,但我不能对vampire
元素做同样的事情。
代码:
div#boxes {
clear: both;
float: right;
width: 400px;
margin: 0 10px 10px;
vertical-align: top;
display: inline;
background-color: #fff;
border: 1px solid black;
height: 75px;
/* overflow: hidden; */
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
span#vampire {
clear: both;
/* float: initial; */
width: 50%;
margin: 0 -1px -1px;
vertical-align: top;
display: contents;
border: 1px solid rgb(153, 170, 181);
/* text-align: center; */
position: relative;
top: -0.5px;
/* margin-bottom: inherit; */
bottom: 50px;
padding-top: 50px;
}
div.rititle {
/* position: relative; */
vertical-align: top;
border-bottom: 1px solid rgb(153, 170, 181) !important;
float: left;
width: 200px;
/* margin-bottom: initial !important; */
text-align: center;
clear: both;
margin-left: auto;
display: inline-block;
font-size: 17px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
#container {
left: 0px;
color: #000;
width: 1000px;
min-width: 499px;
margin: 10px auto;
position: relative;
background-color: #FFF;
box-shadow: -2px 2px 5px #111;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
body {
color: #FFF;
background-color: #999;
font-family: Arial, sans-serif;
/* margin-bottom: 40px; */
}
.rititle {
margin-left: 10px;
font-weight: bold;
vertical-align: top;
}
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
div#switch {
clear: both !important;
width: 200px !important;
margin: 0 0px 0px !important;
vertical-align: middle !important;
display: block !important;
text-align: center !important;
position: relative !important;
border: 1px solid rgb(153, 170, 181);
/*top: -76px;*/
float: right;
text-align: center !important;
border-bottom: 1px solid rgb(153, 170, 181) !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="boxes" style="background-color: rgb(39, 44, 48);color: rgb(230, 230, 230);border-color: rgb(153, 170, 181);"><span id="mafia" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div class="rititle">Mafia</div><div style="font-size: 12px"><span class="rititle">Mafioso: </span>2. Cotton Mather</div>
<div style="font-size: 12px"><span class="rititle">Consort: </span>4. Edward Bishop</div>
<div style="font-size: 12px"><span class="rititle">Godfather: </span>7. Black Stain</div>
<div style="font-size: 12px"><span class="rititle">Consigliere: </span>10. bonr juice</div>
</span><span id="vampire" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div id="switch" class="rititle">Coven</div><div style="font-size: 12px"><span class="rititle">Coven Leader: </span>1. Oppai Dragon</div>
<div
style="font-size: 12px"><span class="rititle">Medusa: </span>3. Jades Whoree</div>
<div style="font-size: 12px"><span class="rititle">Potion Master: </span>11. RainBow</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</span>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</div>
</body>
</html>
我正在尝试将两个 span 元素mafia
与vampire
它们的子元素(如列)对齐。另外,是否有可能使元素的高度boxes
发生变化以适应最长列的长度?
解决方案
就像下面使用css flexbox一样简单;
您的代码太脏了,大多是多余的,错误地使用了类和样式。
.columns{
display: flex;
}
.columns .box{
flex: 1;
background: #000;
color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
display: flex;
flex-direction: column;
}
.box .title{
font-weight: bold;
font-size: 15px;
padding: 5px;
border: 1px solid #f5f5f5;
}
<div class='columns'>
<div class='box'>
<span class='title'>Mafia</span>
</div>
<div class='box'>
<span class='title'>Coven</span>
<span>sssssss</span>
<span>sssssss</span>
<span>sssssss</span>
</div>
</div>
推荐阅读
- javascript - 如何在javascript中将一个类的属性复制到另一个类,包括方法
- ruby-on-rails - 从视图中使用 ransack 对多列进行排序
- kotlin - Kotlin 中的可空变量
- kubernetes - 为什么“helm install --dry-run”没有给我一个关于冲突的错误,但实际的“helm install”呢?
- amq - 带指数退避的 AMQ 消息排序
- algorithm - 构建递归算法来检查二维单词数组
- java - Google colab 上 r 脚本中的 java 问题
- go - 有没有办法在 go 中单独处理服务器连接?
- python - 通过列表递增并找到一系列切片的最大值
- javascript - vuejs 拆分为字符串到数组