3

一見、見た目がよくない「問題」があります。だから、私は子供を含む親divを持っています。1人の子供にはテキストが含まれ、もう1人の子供には写真が含まれます。どちらもインラインブロック要素であり（互いに隣接して配置する必要があります）、幅が設定されています。これで、画像のdivがテキストのdivよりも大きい場合、親はそのdivの高さ（最大のもの）を継承します。ただし、2番目の子（小さい方）はそのdivの下部に配置されます。私が欲しいのは、そのdivを常に一番上に置くことです。

私はもう試した

top: 0px;

とか、しかしそれは動作しません。底にくっつくだけです。

これが私のサンプル（html）コードです：

<div id="parent">
  <div id="child1"> Assassin's Creed IV: Black Flag: Gameplay Reveal Trailer - Chart your course through a treacherous and unpredictable world as the Assassin's Creed series hits the high seas in Assassin's Creed IV: Black Flag. <a href="http://bit.ly/Zny5pI">http://bit.ly/Zny5pI</a> </div>
  <div id="child2"> <img width="300px" src="http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/536527_10151407411789285_1500143344_n.jpg" /> </div>
</div>

そしてこれがCSSです：

#parent {
  border: 2px solid green;
}

#child1 {
  border: 2px solid black;
  display: inline-block;
  width: 400px;
  margin: 2px;
  top: 0px;
}

#child2 {
  border: 2px solid red;
  display: inline-block;
  width: 300px;
}

例として、GameTrailersによるFacebookへの投稿を取り上げました。

誰かがこの「問題」を解決することによって私を助けることができますか？難しいことではないと思いますが、CSSを使ってからしばらく経ち、私のお気に入りの「コーディング言語」ではありません：P

前もって感謝します。

4

5 に答える 5

9

CSSルールを追加してみてください。

vertical-align:top;

トップアラインしたいすべてのインラインブロックdivに

幸運を！

于 2013-03-25T17:56:11.340 に答える
8

display: inline試すのではなくfloat: left。

于 2013-03-25T17:58:20.803 に答える
5

これを行うにはいくつかの異なる方法があり、それらはすべて機能するはずです。

1：

#parent > div{
    vertical-align: top;
}

2：

#parent{
    position: relative;
}
#parent > div{
    position: absolute;
    top: 0px;
}

3：

#parent > div{
    float: left;
}
于 2013-03-25T17:56:15.387 に答える
1 
#parent > div {vertical-align: top}
于 2013-03-25T17:56:04.363 に答える
0

あなたは常に絶対的なポジショニングでそれを行うことができますが、これは通常、将来的に問題を引き起こします、相対的なポジショニングに固執してみてください。

http://jsfiddle.net/C6n86/

#parent {
   border: 2px solid green;
   width: 504px;
   margin: 0px;
   padding: 0px;
   position: relative;
   float: left;
}

#child1 {
  position: absolute;
  top: 0px;
  float: left;
  height: 279px;
  color: white;
}

#child2 {
  position: absolute;
  top: 0px;
  float:left;
}
于 2013-03-25T18:05:40.223 に答える