将相对定位的子项保持在所需的父块最大-最大等值范围内 [英] Keep relatively positioned child within parent block max-top equivalent needed

问题描述

有一个 html 代码 https://jsfiddle.net/1t68bfex/

button {
  position: relative;
  top: 100px;
  left: 150px;
  max-top: 10px;
}

.third-party-block {
  //display: none;
}

<div style="border:1px solid red;">
  <button>
       The text from the left is beautiful
      </button>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>

这里的问题是第三方块是动态的，如果未显示，则按钮应位于顶部附近.如果父级的高度太短，则应更改top:100px.

The problem here is the third-party-block is dynamic and if it is not displayed, the button should stay near the top. The top:100px should be changed if the height of the parent is too short.

因此，我正在寻找与max-width等效的宽度，但对于我的情况相同.需要纯CSS解决方案.

So, I'm looking at something like max-width equivalent for width, but the same for my situation. Pure CSS solution is needed.

推荐答案

您可以考虑使用flexbox实现此目的:

You can consider the use of flexbox to achieve this:

.container {
  border: 1px solid red;
  display: flex;
}

button {
  margin-top:10px;
  align-self:flex-end;
}
.button {
  order: 1;
  max-height:100px;
  display:flex;
}

<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
        <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
    <p>
      some text comes here
    </p>
  </div>
</div>
<div class="container">
  <div class="button"><button>
   The text from the left is beautiful
  </button></div>
  <div class="third-party-block">
    <p>
      some text comes here
    </p>
  </div>
</div>

这篇关于将相对定位的子项保持在所需的父块最大-最大等值范围内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！