Question

我有以下HTML（JSFiddle Example）：

<header>
  <div class="wrapper">
    <p>Header Text</p>
  </div>
</header>

<div class="intro">

  <div class="frame">
    <img src="https://via.placeholder.com/800x240">
  </div>

  <div class="inner">
    <div class="wrapper">
      <p>Body text</p>
    </div>
  </div>

</div>

目标

正文文本必须在图像上方；
正文和标题文本必须保持对齐。

问题是将屏幕调整为小尺寸时，“正文”和“标题文本”未对齐。

Wrapper类负责保持中心对齐的区域（宽度最大为1024px）的位置，在其中放置内容，例如“标题文本”和“正文文本” ...

如何解决这个问题？

CSS代码如下：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 400px) { 
  .wrapper { padding: 0 40px;}
}

@media screen and (min-width: 401px) {  
  .wrapper {
    margin: 0 auto;
      width: 90%;
  }
}

img {
  height: auto;  
  max-width: 100%;
  outline: 0; 
  width: 100%;
}

div.intro {
  overflow: hidden;
  position: relative;  
}

@media screen and (max-width: 400px) { 

  div.frame {
    margin: 0 -14rem; 
  }

  div.frame {
    margin: 0 -4rem; 
  }

}

div.inner {
  max-width: 600px;
  position: absolute;
  top: 40px;
}

Answer 1

尝试使用此CSS代码

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
 }

 @media screen  { 
   .wrapper { padding: 0 40px;}
 }

 @media screen {  
   .wrapper {
      width: 90%;
   }
 }

 img {
   height: auto;  
   max-width: 100%;
   outline: 0; 
   width: 100%;
 }

 div.intro {
   overflow: hidden;
   position: relative;  
 }

 @media screen and (max-width: 400px) { 

   div.frame {
     margin: 0 -14rem; 
   }

   div.frame {
     margin: 0 -4rem; 
   }

 }

 div.inner {
   max-width: 600px;
   position: absolute;
   top: 40px;
 }

两个文本对齐。一个以上的图像

1 个答案: