需要在容器div中使内部div上下对齐

Question

需要在容器div中使内部div上下对齐

7

最外层的容器 div 有两个内部 div - 右侧的内部 div 具有根据用户输入而增长或缩小的文本（稍后会有更多文本模拟在文本 div 中通过设置其高度：250px）。奇怪的是 - 当右侧内部 div 的高度增加时，左侧内部 div '下降' 在外部 div 中。我在 div 周围放置了彩色轮廓 - 左侧内部 div 是一个带有“下降”问题的蓝色轮廓。由于用户输入的文本而“增长”的是右侧带有紫色边框的内部 div。

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

我需要带有蓝色边框的左侧 div 完全不受输入文本量的影响。带有蓝色边框的左侧 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>

- wantTheBest

1

那个250像素的高度没有正确模拟div中文本的外观。这是jsfiddle中的法律文本，没有250像素的高度http://jsfiddle.net/JSyYY/1/ - Gregg B

哇。在解决“左侧div下降”问题之前，我还没有输入真正的文本量。现在我看到了一个新问题——为什么现在填充了文本的右侧div不再位于左侧蓝色div的右侧？ - wantTheBest

感谢Grillz--我在右侧变得更大的文本上设置了width:150px，这使得右侧紫色边框div不再被迫放在左侧蓝色边框div下面。感谢您提醒布局中“大量文本”效应的问题。 - wantTheBest

你在外部盒子上的inline-block属性使它们变成了内联元素。这是一个快速的示例：http://jsfiddle.net/JSyYY/3/ - Gregg B

没问题。祝你好运。 - Gregg B

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Archan Mishra · Accepted Answer

你应该尝试将蓝色边框 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>