Question

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

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

希望有所帮助：）

编辑：修复小提琴链接。

Answer 2

如果您希望To top of page显示在底部，则可以将div放入容器div中，使用此样式：

div.container {
  position: relative;
}

使用以下样式向bottom添加To top of page课程：

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

<强>

<强> Fiddle

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上查看其工作原理。

希望这有帮助

HTML，CSS将DIV中的文本与并行div中的文本对齐

Fiddle

4 个答案:

<强> Fiddle