-2

我在实现特定设计目标方面遇到问题，希望您能在这里帮助我。

我在 PS 中制作了一张图片，希望能向您解释我想要什么：

示例 1

这张图片的每一部分都应该在一个单独的标签中（例如 div），并像这样放置。标志应该放在大图的顶部，边缘之间只有一点点空间。名称与图片底部或中间（看起来最好的）放在同一水平线上。

标题（新 911）与大图的顶部一起放置，描述在中间（总是在中间，文本长度会有所不同），页脚（信息信息）与图片底部对齐。

这是任何人都可以帮助我的吗？

我有一些代码，但它不能完全按计划工作。这是我的 HTML：

<div class="content">
  <div class="left">
    <div class="poster">
      <div class="poster_img">
        <img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
      </div>
      <div class="poster_name">Porsche</div>
    </div>
    <div class="img">
      <img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
    </div>
  </div>
  <div class="right">
    <div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
    <div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
    <div class="footer">
    <div class="info1">info</div>
    <div class="info2">info</div>
  </div>
</div>

这是我的CSS：

.content {
  position: relative;
  clear: all;
  margin: 5px;
  margin-top: 10px;
}   

.left {
  display: table-cell;
}

.poster {
  position: relative;
  margin-bottom: -50px;
  height: 50px;
}

.poster_img {
  display: table-cell;
  position: absolute;   
}

.poster_name {
  display: table-cell;
  padding-left: 52px;
  font-size: 15px;
}

.img {}

.right {
  display: table-cell;
  padding-left: 10px;
}

.header {}

.main {}

.footer {}

.info1 {
  display: table-cell;
}

.info2 {
  display:table-cell;
  padding-left: 25px;
}

希望你能在这里帮助我！:)

  • 亚历山大。
4

2 回答 2

1

使用 CSS 定位元素并不像看起来那么复杂（如果你的设计理念很好的话）。

我喜欢使用网格来清晰地定位元素。然而，大多数时候在父元素上position: absolute;使用 aposition: relative;就足够了。

在此处阅读有关此内容：相对定位中的绝对定位

还可以尝试找到具有类似设计的网站并探索来源。看起来保时捷将是一个不错的起点。还有很多“设计灵感”网站，您可能会找到您想要的东西。

祝你好运。

于 2013-07-31T16:49:44.693 回答
0

与其深入定位，不如考虑将简单的浮动与 clear 结合起来。通常工作得很好 - 给定正确的堆栈顺序。

于 2013-07-31T17:12:10.120 回答