HTML，CSS將DIV中的文本與並行div中的文本對齊

Question

我想知道是否有人可以幫助我一些HTML / CSS。 我正在嘗試在側邊欄div對齊文本，以匹配內容div中的內容，但是我看到的唯一可能的方法是將<p>&nbsp;</p>負載添加到html中。 我想知道是否有更簡單的方法。

小提琴

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)

在這里查看小提琴

希望有幫助:)

編輯：修復了小提琴的鏈接。

Answer 2

如果希望To top of page顯示在To top of page顯示在底部，則可以使用以下樣式將div放入容器div ：

div.container {
  position: relative;
}

使用以下樣式將bottom類添加到To top of page ：

.bottom {
  position: absolute;
  bottom: 0px;
}

小提琴

Answer 3

浮動元素時，該元素將從正常文檔流中刪除。 為了實現您的目標，您可以像這樣在小提琴中設置左側邊欄的position:absolute和height:100% ：

http://jsfiddle.net/Lze4pj61/3/

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
{
    position: absolute;
    width: 270px;
    padding: 1em;
    background-color: #FFFFCC;
    color: #5F021F;
    font-size:17px;
    font-weight:bold;
    height:100%;
}
div.left .to_top {
    position:absolute;
    bottom:10px;        
    text-align:center;
}

HTML：

<div class="header">
    <h3 ><a name="comb"></a>The combined INSPECT</h3>
</div>
<div class="left">
    <p>Syntax</p>

    <div class="to_top">
        <a href="#top">To top of page</a>

    </div>
</div>
<div class="content">
     <p><img src="CombInspect.gif" width="300" height="150" 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>

Answer 4

如果您的內容div的動態高度有所變化，則可以在類似這樣的函數中使用jquery

$(document).ready(function(){
    var header = $(".header");
    var left = $(".left");
    var content = $(".content");
    if(left.height() < content.height()){
        left.height(content.height())
    }
    $( ".thisOffSet" ).offset({ top: content.height()+header.height() });
});

您可以通過更改窗口大小並單擊運行對其進行重新調整，以在此JSFIDDLE上查看其工作方式。

希望這可以幫助