Question

我正在尝试复制您在此网站上看到的内容：http://midwc.net/，标题上方有四个带圆形图像的div（“容器目录”，“自定义容器”，“您是第一个”，“博客”）。您可以看到圆圈完全水平和垂直居中（横跨正方形的顶部边框）。

不幸的是，我的尝试相当遥远：

首先，您可以看到图像与其边界之间存在空间 - 我需要摆脱它。边框应该直接围绕图像。

其次，圆形图像在它们应该位于的左侧，但是我想知道解决这个问题的最佳方法是不使用magjc数字，因为它们在页面调整大小时不起作用。

这是一个JS小提琴：

HTML：

<div class = "container-1">
<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Drawing.png"/>
    </div>
    <h3>BULLSHIT DRAWINGS</h3>
    <p>Black and white, colored pencil drawings of actual bullshit.</p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">More Bullshit</button>
    </a>
    </div>
</div> 

<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Photograph.png"/>
    </div>
    <h3>BULLSHIT PHOTOGRAPHY</h3>
    <p>Black and white, color photographs in a wide variety of sizes.
    </p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">More Bullshit</button>
    </a>
    </div>
</div>  

<div class = "bs-container">
    <div class = "circle-wrapper">
        <img class = "circle" src = "http://thebullshitcollection/wp-content/uploads/2017/04/Bullshit_Tutorial.png"/>
    </div>
    <h3>BULLSHIT TUTORIALS</h3>
    <p>Free, online tutorials to help you draw your own bullshit.</p>
    <div class="center-button">
    <a href="#" class="more-bs-a">
        <button class="more-bs">Subscribe</button>
    </a>
    </div>
</div>   
</div>

CSS：

.container-1 {
display: flex;
justify-content: space-between;
}

.bs-container {
border: 1px solid #BCBEC0;
display: inline-block;
overflow: hidden;
margin-right: 1.8%;
margin-top: 100px;
margin-bottom: 100px;
height: 220px;
width: 360px;
/*gradient background developed here: http://colorzilla.com/gradient-editor/#ffffff+0,f5f0dd+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,240,221,1) 100%); 
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,240,221,1) 100%); 
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,240,221,1) 100%); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f0dd',GradientType=0 ); 
/* IE6-9 */
}

.bs-container h3 {
color: #BCBEC0;
text-align: center;
font-family: PT Sans Narrow;
font-size: 23px;
}

.bs-container p {
font-size: 18px;
font-family: PT Sans Narrow;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}

.circle-wrapper {
position: absolute;
z-index: 999;
top: -50px;
width: 260px;
text-align: center;
}

.circle {
border: 5px solid #BCBEC0;
border-radius: 50%; 
}

.more-bs {
text-align: center;
font-family: Beautiful ES;
color: white;
background-color: #543D2B;
border: 4px solid #000000;
height: 48px;
font-size: 33px;
vertical-align: middle;
padding-top: 14px;
padding-right: 10px;
padding-left: 10px;
}

.more-bs:hover {
color: #9B6A49;
transition: all 0.2s ease-in-out;
}

.more-bs-a {
color: white;
text-decoration: none;
}

.more-bs-a:hover {
color: #9B6A49;
transition: all 0.2s ease-in-out;
}

.center-button {
text-align: center;
}

.container, .container-1 {
width: 80.9%;
padding: 0px 5% 0 10%;
}

无论页面大小如何，我怎样才能使这些图像始终位于div的顶部？我需要JavaScript吗？

由于

编辑：将position: relative添加到.bs-container课程后：

编辑2 ：将这些样式应用于.circle-wrapper后：

这让我几乎到了那里 - 现在我只需要将图像显示在容器的顶部，就像它们位于一个新的独立层上一样。

Answer 1

尝试添加到.bs-container

overflow: visible !important;和position: relative;

更新.circle-wrapper看起来像这样

.circle-wrapper {
    position: absolute;
    z-index: 999;
    top: -8%;
    left: 50%;
    width: 260px;
    text-align: center;
    transform: translateX(-50%) translateY(0%);
}

我无法测试您的图片，因为它们没有加载。您可以使用.circle-wrapper

的顶部和左侧值

Answer 2

添加位置：相对于.bs-container 这绝对会将圆形包装器放在其中而不是

中

Answer 3

一切都错了。将每个（图像+标题+其信息）包裹在单独的div

中

＆＃13;

div {
  float: left;
  margin: 50px;
  border: 1px solid black;
}

h3 {
  background: red;
  border: black;
  width: 50px;
  height: 40px;
  position: relative;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}

＆＃13;

<div class="wrapper">
  <h3>image</h3>
  <h1>this is heading</h1>
  <h2>this is info</h2>
</div>
<div class="wrapper">
  <h3>image</h3>
  <h1>this is heading</h1>
  <h2>this is info</h2>
</div>
<div class="wrapper">
  <h3>image</h3>
  <h1>this is heading</h1>
  <h2>this is info</h2>
</div>
<div class="wrapper">
  <h3>image</h3>
  <h1>this is heading</h1>
  <h2>this is info</h2>
</div>

＆＃13;

将圆形图像添加到方形区域的顶部中心

3 个答案: