javascript - float 时div的高度变化

Question

我有两个 div，其中一个将 float 到左侧(第一个)。但我意识到它的高度和宽度会发生变化，我不想那样。问题出在哪里？这是我用于 float div 的 js 代码:

function batch() {
  var projects = ["Batch Script Tutorial", "Manage your PC", "Yahoo joke"];
  var text = "";
  var i;
  for (i = 0; i < projects.length; i++) {
    text += projects[i] + "<br>";
  }
  document.getElementById("batch").style.float = "left";
  document.getElementById("showbatch").innerHTML = text;
}

.project {
  background-color: #5318a0;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 5px 7px;
  text-align: left;
}
.project:hover {
  background-color: #8358ba;
  border-radius: 2px;
  box-shadow: 2px 2px 3px black;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 5px 7px;
  text-align: left
}
.project:active {
  background-color: #462076;
  border-radius: 2px;
  box-shadow: 2px 2px 1px white;
  color: #efedf2;
  font-family: helvetica, sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding: 5px 7px;
  text-align: left
}

<div><span class="project" id="batch" onclick="batch()">Projects</span>
</div>
<div id="showbatch" style="display:inline-block"></div>

Answer 1

HTML:

<span class="project" id="batch">Projects</span>
<span id="showbatch" style="display:none; vertical-align:top;">
<ul>
    <li>Batch Script Tutorial</li>
    <li>Manage your PC</li>
    <li>Yahoo joke</li>
</ul>
</span>

JS:

$('#batch').click(function(){
  $('#showbatch').css('display', 'inline-block');
})

Fiddle