位置 div 在另一个 div 的边界上

Question

我正在尝试制作一个用户信息框，其中包含头像和一些附加信息。我希望那个头像留在那个容器的边界上，垂直翻译如下例所示。

但是，如您所见，当我翻译元素时，它的某些部分变得不可见，因为内容未 "pushed" 下来。如何获得相同的结果，但正确显示图像？我试过 position: absolute 和 top 和 bottom，但我没能达到预期的结果。

注意：在我的应用程序中，div 和 class="profile-info-container" 在 Bootstrap col 内，这就是宽度设置为 100 的原因%.

谢谢！

.profile-info-container {
  background-color: white;
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  margin: 20px 10px;
  position: relative;
  text-align: center;
  min-height: 300px;
  height: auto;
  width: 100%
}

.profile-info-image {
  transform: translateY(-50%) rotate(45deg);
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
  </div>
</div>

Answer 1

我认为您可以删除图像部分的 transform:rotate 以使头像图像居中。我已将 margin-top:30% 添加到您的内容和 profile-info-container。

.profile-info-container {
    background-color: white;
    border: 2px solid #7EA2BC;
    border-radius: 10px;
    margin: 20px 10px;
    position: relative;
    text-align: center;
    min-height: 300px;
    height: auto;
    width: 100%;
    margin-top: 30%;
}

.some-text {
    margin-top: 30%;
}

.profile-info-image {
    /*transform: translateY(-50%) rotate(45deg);*/
    border-radius: 100%;
    height: auto;
    margin: auto;
    width: 50%;
    border: 10px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    left: 50%;
}

.profile-info-image img {
    /*transform: rotate(-45deg);*/
    border: 1px solid #7ea2bc;
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.half {
    width: 50%;
}

<div class="half">
    <div class="profile-info-container">
        <div class="profile-info-image">
            <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
        </div>
        <div class="some-text">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>

Answer 2

您可以在此处创建 CSS 网格布局，而不是使用 translate：

制作profile-info-container一个网格容器,
将profile-info-image放在第一列跨越两行，
第三行图片下方的文字,
边框背景是使用跨越第二行和第三行的伪元素制作的。

参见下面的演示：

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  display: grid; /* grid container */
}

.profile-info-container::after {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4; /* row 2 and 3*/
  grid-column: 1; /* column 1 */
}

h2 {
  grid-row: 3; /* row 3 */
  grid-column: 1; /* column 1 */
}

.profile-info-image {
  transform: rotate(45deg); /* <-- removed translate */
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  grid-row: 1 / 3; /* row 1 and 2 */
  grid-column: 1; /* column 1 */
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>Some text here</h2>
  </div>
</div>

位置 div 在另一个 div 的边界上

Position div on the border of another div

html

css

css-position