将div放置在另一个div的边框上 [英] Position div on the border of another div

问题描述

我正在尝试在一个用户信息框内放置一个化身和一些其他信息.我希望该头像保持在该容器的边框上，如下面的示例所示进行垂直翻译.

I am trying to make a user-information box where there is an avatar and some additional information. I want that avatar to stay on the border of that container, vertically translated as in the example below.

但是，正如您所看到的，当我翻译元素时，元素的某些部分变得不可见，因为内容没有被按下".如何获得相同的结果，但正确显示图像?我尝试使用 position:absolute 和 top 和 bottom 进行游戏，但是我无法达到预期的效果.

However, as you can see, when I translate the element some part of it becomes invisible, since the content is not "pushed" down. How can I achieve the same result, but properly displaying the image? I tried playing with position: absolute and top and bottom, but I wasn't able to achieve the desired result.

注意:在我的应用中，Bootstrap列内有一个 class ="profile-info-container" 的div，这就是为什么宽度设置为100％的原因.

Note: in my app, a div with class="profile-info-container" is inside a Bootstrap col, that's why width is set to 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>

推荐答案

代替使用 translate ，您可以在此处创建CSS网格布局:

Instead of using translate, you can create a CSS Grid layout here:

• 将 profile-info-container 设为网格容器

将 profile-info-image 放在第一列 spanning 两行中，

第三行图片下方的文本

边框背景是使用跨越第二行和第三行的伪元素制成的.

the border background is made using a pseudo element that spans the second and third rows.

请参见下面的演示

.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的边框上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！