我想知道是否有人可以帮助我处理一些 HTML/CSS。我正在尝试在边栏中排列文本 div
匹配内容中的内容div
但我能看到的唯一方法是添加 <p> </p>
的负载到 HTML。我想知道是否有更简单的方法。
Fiddle
HTML:
<div class="header">
<h3><a name="comb"></a>The combined INSPECT</h3>
</div>
<div class="left">
<p>Syntax</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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;
}
最佳答案
您是否完全反对使用 jQuery(我并不是想无礼,只是问您是否不想使用它)?否则,我建议您使用 .height() 获取内容 div 的高度,并以此方式设置侧边栏的长度。
var adjustedHeight = $(".content").height()
$(".left").css("height", adjustedHeight)
希望对您有所帮助:)
编辑:修复了 fiddle 链接。
关于HTML、CSS 将 DIV 中的文本与平行 div 中的文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27138555/