-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;aを指定するだけで十分です。position: relative;

これについては、こちらをお読みください:相対ポジショニング内の絶対ポジショニング

また、同様のデザインのサイトを見つけて、ソースを調べてみてください。ポルシェは始めるのに適しているようです。探しているものが見つかるかもしれない「デザインのインスピレーション」サイトもたくさんあります。

幸運を。

于 2013-07-31T16:49:44.693 に答える