Question

我遇到的问题是两个元素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>

我正在尝试将名为mafia和vampire的两个span元素及其子元素（如列）对齐。另外，是否可以使元素boxes的高度发生变化以适合最长列的长度？

Answer 1

使用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>

如何将两个元素彼此相邻放置

1 个答案: