定位和包装元素需要CSS帮助

Question

我目前正在使用jQuery Mobile构建移动应用程序，但由于缺乏对CSS的理解而陷入困境。

我需要一些帮助来设计原型的中间部分，我认为它包含多个div，它们相互重叠，使用相对和绝对定位。

我应该从包装中开始包含唐纳德特朗普的图像并引入其他div来定位图像吗？有了所有的div，我是否将它们组合在一起，以便在所有移动设备上保持一致的外观？如果有，怎么样？如果有人能用CSS代码解释如何实现原型中显示的样式，我将不胜感激。

Answer 1

当然，有几种方法可以实现您的目标。这是一种可能性，它利用了：

• 对部分（例如<article>，<header>等）使用特定的html标记，而不是鼓励使用通用div。

• 方便的::after css选择器，它允许您直接从css以编程方式将某些内容附加到现有元素。在这种情况下，黑色方块。

• 元素与position: relative的相对位置。这允许您相对于其“正常”位置向上移动文章部分，使其与图像重叠。

• 宽度定义为百分比，width: 90%，确保与图像重叠的文章总是略薄，以达到理想的效果。

• translate css属性，它允许您将黑色方块移动其自身宽度的50％，因此它完全居中（没有translate属性，黑色方块的左侧将是居中，而不是正方形的中心居中）。

我鼓励您使用下面的示例来了解每个css规则对布局的影响。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  max-width: 500px;
  margin: auto;
  text-align: center;
  background: white;
}
.image {
  margin-top: 10px;
  background: url('https://fortunedotcom.files.wordpress.com/2017/01/trump2_thumb.jpg') top center no-repeat;
  background-size: cover;
  min-height: 250px;
}
.image_overlap {
  border-top: 5px solid red;
  padding-top: 40px;
  position: relative;
  top: -40px;
  width: 90%;
  margin: 0 auto;
  background: white;
}
.image_overlap:after {
  content: '1';
  background: black;
  position: absolute;
  color: white;
  width: 50px;
  height: 50px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

<header>
  <h1>Top Stories</h1>
  <h2>from the world of evil</h2>
</header>

<main>
  <div class="image"></div>
  <article class="image_overlap">
    <p>#AMERICA</p>
    <br>
    <h3>How the WWIII <br>Took Place Last Night</h3>
  </article>
</main>