html - HTML 和 CSS 的布局问题 - 由于其他元素的高度，无法将 div 紧贴地移动到新位置

Question

我正在为我的 HTML 布局而苦苦挣扎

它目前看起来像，这是想要的:

但是，可能会有更多文本添加到右中框(以“I will grow with content”开头的框)。当他出现时，我希望右下角的框(以“The important bit”开头的框)紧贴在左侧菜单下方。

我遇到的问题是，虽然它在左侧菜单下移动，但并不舒适。

在下面的 JSFiddle 中，有一行注释，如果取消注释，就会看到问题(屏幕截图)。正如您还看到的，我希望该框以蓝色箭头所示的方式开始。

JS fiddle :Fiddle

HTML:

<div class="myContainer">
  <div class="box">
    <p>Left menu</p>
    <p>Left menu</p>
    <p>Left menu</p>
    <p>Left menu</p>
    <p>Left menu</p>
    <p>Left menu</p>
    <p>Left menu</p>
  </div>
  <div class="box">
    <p>My heading - fine as is, a fixed size based upon content</p>
  </div>
  <div class="box">
    <p>I will grow with content in some situations! If I get really big (greater height), then the box below (called important bit) should fit snuggly under Left menu</p>
    <p><!--I am more content which is not predicatble... Ha ha ha ha ha, I have destroyed this wonderfully layout design. Next step, the world! --></p>
  </div>
  <div class="box">
    <p>The important bit. I want to appear under left menu, but I don't. There is a big old margin between me and the Left menu </p>
  </div>
</div>

CSS:

.myContainer
{ 
    width:420px;
    float:left;
}

.box{
    float:left;
    border:solid;
    width:200px;
}

这可以仅使用 HTML 和 CSS 来完成吗(意思是，没有任何类型的 JS/Jquery/脚本语言等)？

Answer 1

我认为这可能是您正在寻找的解决方案! http://jsfiddle.net/aq2vr/

html

<div class="myContainer">

<div class="boxLeft">
    <p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p><p>Left menu</p>
</div>

<div class="boxRight">
    <p>My heading - fine as is, a fixed size based upon content</p>
</div>

<div class="boxRight">
    <p>I will grow with content in some situations! If I get really big (greater height), then the box below (called important bit) should fit snuggly under Left menu</p><p><  I am more content which is not predicatble... Ha ha ha ha ha, I have destroyed this wonderfully layout design. Next step, the world! --></p>
</div>

<div class="boxLeft">
    <p>The important bit. I want to appear under left menu, but I don't. There is a big old margin between me and the Left menu </p>
</div>

CSS

.myContainer
{ 
  width:440px; // increased the width to 440px to accomodate the extra margin in the objects now. You can adjust the margins and widths of the objects to bring this back down to 420px if you wish.
  float:left;
}

.boxRight
{
  float:right; // any boxes you want to stay in the right column
  border:solid;
  width:200px;
  //position:relative; //Position:relative; and left:-14px is for realigning the columns
  //left:-14px;        //to the container box so that they do not have any space between the container and themselves.
}

.boxLeft
{
  float:left; // any boxes you want to display in the left column.
  border:solid;
  width:200px;
  margin-left:14px; // for re-aligning the boxes in the right column when it does not overflow
  //position:relative; //Position:relative; and left:-14px is for realigning the columns
  //left:-14px;        //to the container box so that they do not have any space between the container and themselves.
}