Question

我正在尝试制作一张全宽度的卡片来覆盖我的页面something like this，但我确实实现了类似的目标，但是它的响应能力和div的位置确实很“笨拙”

（例如，.cardtext div不垂直居中），

我似乎无法在这里找到解决方案..如果有人可以提供以下代码的帮助，

编辑jsfiddle代码：https://jsfiddle.net/whillis/Lpjxvhw1/1/

.content{
     position: relative;
 }

 .card{
     width: 100%;
     padding: 0px 50px 100px 50px; 
 }

 .cardimg {
     position: relative;
     border-radius: 10px;
     top: 450px;  
     width: 60%;
     left: 40%;
 }

 .cardtext { 
     position: relative;
     top: 50%;   
     transform: translateY(-50% -50%);
     border-radius: 10px;
     background-color: white;
     color: black;
     box-shadow: 0 0px 20px -5px rgba(0, 0, 0, 0.25);
     left: 0;
     width: 60%;
     height: 20em;
     text-align: left;
     padding: 50px 50px 0 50px;   
 }

 .btn {
     color: black;
     padding: 0.8rem;
     font-size: 14px;
     text-transform: uppercase;
     text-align: left;
     transition: 0.2s;
     border-radius: 4px;
     font-weight: 400;
     display: block;
     width: 100px;
     cursor: pointer;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: transparent;
 }

 .btn:hover {
     transform: scale(1.02);
     color: white;
     background-color: gray;
 }

<div class="content">
     <div class="card">
        <img class="cardimg" src="imagens/inicio/figura1.png">
        <div class="cardtext">
           <h1>Lorem ipsum dolor sit amet</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis enim.</p>
           <button class="btn card_btn">Veja mais</button>
        </div>
     </div>
     <div class="card">
        <img class="cardimg" src="imagens/inicio/figura1.png">
        <div class="cardtext">
           <h1>Lorem ipsum dolor sit amet</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis enim.</p>
           <button class="btn card_btn">Veja mais</button>
        </div>
     </div>
  </div>

Answer 1

@Whillis我认为是因为填充而元素受box-sizing: content-box

的影响

这是您想要的吗？ https://jsfiddle.net/sho1up6q/

Answer 2

有两种解决方案，但是一种快速的解决方案（不要过多改变您的结构）是使用A并进行调整。

这是HTML：

position: absolute

和CSS：

    <div class="card">
        <img class="cardimg" src="http://lorempixel.com/400/200/nature">
        <div class="cardtext">
            <div class="cardtextcontainer">
              <h1>Lorem ipsum dolor sit amet</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis enim.</p>
              <button class="btn card_btn">Veja mais</button>
            </div>
        </div>
      </div>
      <div class="card">
        <img class="cardimg" src="http://lorempixel.com/400/200/city">
        <div class="cardtext">
            <div class="cardtextcontainer">
              <h1>Lorem ipsum dolor sit amet</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis enim.</p>
              <button class="btn card_btn">Veja mais</button>
            </div>
        </div>
      </div>

请注意，根据您的图像尺寸，您可能需要稍作调整：）

div图像出现问题

2 个答案: