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

发布于 2024-12-18 01:44:34 字数 1313 浏览 0 评论 0原文

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

原文

The outermost container div has two inner divs - the right-side inner div has text that can grow or shrink based on user input (to come later, a lot of text is simulated now in the text div by setting its height:250px). The weird thing is -- as the right-side inner div's height grows -- the left side inner div 'falls' downward in the outer div. I put colored outlines around the divs -- the left inner div, the one with the 'falling' problem has a blue outline. The 'growing due to user-entered text' is the inner div on the right with the purple border.

The outer container of the 2 inner divs has an orange outline.

I need the left div with the blue border to be 100% UNAFFECTED or un-influenced by the amount of text entered. That left div with the blue border must stay in the top-left corner of the outer container div that has the orange border.

Why does the height of a box in the right-side green div push the left div downward?

Here's a link to see what's happening:

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

Here's the code:

<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>  </div>
  </div>
/div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你好，陌生人 2024-12-25 01:44:34

你好，应该尝试将垂直对齐设置为 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>  </div>
    </div>
</div>

Hiyou should try setting the vertical Align to top of the parent div of the blueborder 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>  </div>
    </div>
</div>

回复收藏 0 原文

~没有更多了~