HTML、CSS 将 DIV 中的文本与平行 div 中的文本对齐

Question

我想知道是否有人可以帮助我处理一些 HTML/CSS。我正在尝试在边栏中排列文本 div匹配内容中的内容div但我能看到的唯一方法是添加 <p>&nbsp;</p> 的负载到 HTML。我想知道是否有更简单的方法。

Fiddle

HTML:

<div class="header">
  <h3><a name="comb"></a>The combined INSPECT</h3>
</div>
<div class="left">
  <p>Syntax</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><a href="#top">To top of page</a>
  </p>
</div>
<div class="content">
  <p>
    <img src="CombInspect.gif" width="649" height="338" alt="combined" />
  </p>
  <p>This format of the INSPECT combines the syntactic elements of the previous two formats allowing both counting and replacing to be done in one statement.</p>

</div>

CSS:

div.header {
  padding: 0.5em;
  color: #FFFF00;
  background-color: #993300;
  clear: left;
  line-height: 0px;
}
div.content {
  margin-left: 300px;
  border-left: 1px solid gray;
  padding: 1em;
  background-color: #FFFFFF;
}
div.left {
  float: left;
  width: 270px;
  padding: 1em;
  background-color: #FFFFCC;
  color: #5F021F;
  font-size: 17px;
  font-weight: bold;
}

Answer 1

您是否完全反对使用 jQuery(我并不是想无礼，只是问您是否不想使用它)？否则，我建议您使用 .height() 获取内容 div 的高度，并以此方式设置侧边栏的长度。

var adjustedHeight = $(".content").height()

$(".left").css("height", adjustedHeight)

Check out the fiddle here

希望对您有所帮助:)

编辑:修复了 fiddle 链接。