将div放在另一个div的边框上

Question

我正在尝试创建一个用户信息框，其中有一个头像和一些其他信息。我希望该头像保留在该容器的边框上，如下例所示垂直翻译。

但是，正如您所看到的，当我翻译元素时，它的某些部分变得不可见，因为内容不会被“推”下来。如何才能获得相同的结果，但是正确显示图像？我尝试过使用position: absolute和top以及bottom，但是我无法达到预期的效果。

注意：在我的应用程序中，带有class="profile-info-container"的div位于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

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

• 使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>

Answer 2

我认为您可以删除图像部分的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>