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

本文介绍了将div放置在另一个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="www.ibts/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="www.ibts/wp-content/uploads/2017/08/iStock-476085198.jpg" /> </div> <h2>Some text here</h2> </div> </div>