Question

我想要以下结果：

这是两张重叠的图像。

我很接近用表格和填充来实现这一点，

<div class="container">
  <table border="1">
    <tr> 
      <th width=500px>
        <div align="center">    
          <img
               src="./img/img_codemesomething.png"
               style="padding-left:100px"
               width=100% />    
        </div>
      </th> 
      <td width=500px>
        <div align="justify">       
          <img
               src="./img/img_recordmesomething.png"
               style="padding-right:100px"
               width=100% />    
        </div>
      </td>
    </tr>
  </table>
</div>

但是，结果是两者都变得很小。或左一个开始变得大于右一个。然后，我尝试在两个图像上（左右两边）都使用padding，但是padding-right却不执行任何操作，而padding-left将图像向右推送则意味着它不再居中。

这是这样的：

（忽略边框）。

如果id如第一张图片所示，结果。并将其精确地定位在浏览器的宽度和高度中-我将如何进行呢？

谢谢：）

***编辑：

Css只不过是：

.container{
    width:900px;
    margin:auto;
}

***编辑2：好的，所以我非常接近。现在唯一的问题是，一切都已向右移动，不再居中，但这是我所做的：

<div class="container">
    <div class="centered">
                    <table border="0" width=1400px>
                    <tr> 
                        <td width=500px height=400px>
                            <div>   
                                <img
                                    src="./img/img_codemesomething.png"
                                    style="padding-left:40"
                                    width=210%
                                    height=210%
                                </img>  
                            </div>
                        </td>   
                        <td width=500px height=400px>
                            <div>       
                                <img
                                    src="./img/img_recordmesomething.png"
                                    width=210%
                                    height=210%
                                </img>  
                            </div>
                        </td>   

                </table>
    </div>          
</div>

CSS：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container{
    width:900px;
    margin:auto;
}

结果：

我尝试使其居中放置，但我还将检查其他解决方案。所以让他们来吧:)

Answer 1

这是您根据要求提供的解决方案，可以使用图像代替颜色。

  <div class="container">
    <div class="traingle">
      <div class="triangle-left">
        <p>Code me something</p>
      </div>
      <div class="triangle-right">
        <p>Record me something</p>
      </div>
    </div>
  </div>

css在这里

.traingle{
    position: absolute;
    width: 620px;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.triangle-left {
    width: 300px;
    border-top: solid 180px rgb(200,30,50);
    border-left: solid 0px transparent;
    border-right: solid 180px #00000000;
    margin-right: -156px;
  }
  .triangle-right {
    width: 300px;
    border-top: solid 0px rgb(200,30,50);
    border-left: solid 180px transparent;
    border-bottom: solid 180px rgb(200,30,50);
  }
   .traingle p{
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-family: sans-serif;
   }

 .traingle .triangle-left p{
    top: 0px;
    left: 20px;
}
.traingle .triangle-right p{
    bottom: 0px;
    right: 20px;
}

Refer Codepen Example

Answer 2

您可以根据实际图像的尺寸来实现。值59％和70％是根据图像尺寸计算的。

AND

PS：：您可以更改<style> .container { position: relative; /** * As we are using absolutely positioned elements, parent element's height will not consider them * If you want to use this component inside normal flow of the document, that would mess things up. * So to make sure that component occupies the height of its children * Calculated as 70 * 59 / 100 */ padding-top: 41.3%; } .imageContainer { /** * Calculated as (W + W - S) / 2 - G * (200 - 100 * (slope.width / image.width)) / 2 - gap * Here slope.width / image.width = 0.58 */ width: 70%; position: absolute; top: 0; } .psuedoContainer { position: relative; /** * To make sure that image always follows the aspect ratio, * even if the container width changes. * Calculated as 100 * (image.height / image.width) */ padding-top: 59%; } .psuedoHolder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } img { height: 100%; width: auto; } </style> <div class="component"> <div class="container"> <div class="imageContainer" style="left: 0;"> <div class="psuedoContainer"> <div class="psuedoHolder" style="text-align: left;"> <img src="./img_codemesomething.png" /> </div> </div> </div> <div class="imageContainer" style="right: 0;"> <div class="psuedoContainer"> <div class="psuedoHolder" style="text-align: right;"> <img src="./img_recordmesomething.png" /> </div> </div> </div> </div> </div>的宽度，所有其他内容都将随套件一起使用，并且可以将.component放置在所需的任何位置

使两个元素彼此相邻重叠

2 个答案: