Question

最外面的容器div有两个内部div - 右侧内部div具有可以根据用户输入增长或缩小的文本（稍后，通过设置其高度，现在在文本div中模拟大量文本： 250像素）。奇怪的是 - 随着右侧内部div的高度增加 - 左侧内部div'在外部div中向下“。我在div周围放置了彩色轮廓 - 左内部div，带有'fall'问题的轮廓有蓝色轮廓。 “由于用户输入的文本而增长”是右边的内部div，带有紫色边框。

2个内部div的外部容器具有橙色轮廓。

我需要带有蓝色边框的左侧div为100％无效或不受输入文本量的影响。那个带有蓝色边框的div 必须保留在具有橙色边框的外部容器div的左上角。

为什么右侧绿色div中盒子的高度会向左推动div？

这是一个链接，可以看到发生了什么：

http://jsfiddle.net/Shomer/JSyYY/

以下是代码：

<div style="display:inline-block; border: 4px solid orange;">
    <div style="border: 2px solid blue; display:inline-block;">
      <div style="display:inline-block; border: 1px solid red;">topleft
      </div>
      <div style="display:inline-block; border: 1px solid red;">topright
      </div>
      <div>lower div
      </div>
    </div>

   <div style="display:inline-block; border: 3px solid purple;">
    <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
   </div>
   <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
   </div>
    <div>&nbsp; </div>
  </div>
/div>

Answer 1

Hiyou应该尝试将垂直对齐设置为blueborder div的父div的顶部。

<div style="display:inline-block; border: 4px solid orange;" >
    <div style="border: 2px solid blue; display:inline-block;**vertical-align:top**">
          <div style="display:inline-block; border: 1px solid red;">topleft
          </div>
          <div style="display:inline-block; border: 1px solid red;">topright
          </div>
          <div>lower div
          </div>
          <!-- <div>a</div> -->
    </div>

    <div style="display:inline-block; border: 3px solid purple;">
        <div style="display:inline-block; height:250px; border: 1px solid red;"> "text"
       </div>
       <div style="display:inline-block; margin-top:0; border: 1px solid red;"> <b>button</b>
       </div>
        <div>&nbsp; </div>
    </div>
</div>

需要内部div在容器div中顶部对齐

1 个答案: