は、私は3つのように同じクラスを持つdiv要素を持っている

Question

同じクラスで3つのdivの内側のボタンをインライン化することはできません

の問題は、内部要素divはインラインで注文されておらず、理由はわかりません。ここに私のCSSです：少しの助けをいただければ幸いです ：

@import "https://fonts.googleapis.com/css?family=Lato"; 
* { 
    margin: 0; 
    padding: 0 
} 

main { 
    font-family: Lato, sans-serif; 
    background: #729fcf; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 

} 

.item { 
    background: #f0ebff; 
    width: 300px; 
    height: 350px; 
    margin: 20px; 
    text-align: center; 
    padding: 20px; 
    box-sizing: border-box; float: left; 

} 

.item img { 
    width: 100px; 
    display: inline; 
} 

.item h3 { 
    text-transform: uppercase; 
    margin: 15px 0; 
} 

.item p { 
    margin: 35px 0; 
    font-size: 12px; 
} 

.item button { 
    background: 0; 
    padding: 10px; 
    border: 3px solid #6076cc; 
    border-radius: 10px; 
    font-size: 12px; 
    margin-top: 35px; 
} 

    [1]: https://i.stack.imgur.com/2QxOA.jpg 

かいつまんで、予想される出力は、次の絵です。

Answer 1

です。

@import "https://fonts.googleapis.com/css?family=Lato"; 
 
* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
main { 
 
    font-family: Lato, sans-serif; 
 
    background: #729fcf; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 

 
} 
 

 
.item { 
 
    background: #f0ebff; 
 
    width: 300px; 
 
    height: 350px; 
 
    margin: 20px; 
 
    text-align: center; 
 
    padding: 20px; 
 
    box-sizing: border-box; float: left; 
 

 
} 
 

 
.item img { 
 
    width: 100px; 
 
    height:50px; 
 
    display: inline; 
 
} 
 

 
.item h3 { 
 
    text-transform: uppercase; 
 
    margin: 15px 0; 
 
    height:50px; 
 
} 
 

 
.item p { 
 
    margin: 35px 0; 
 
    font-size: 12px; 
 
} 
 

 
.item button { 
 
    background: 0; 
 
    padding: 10px; 
 
    border: 3px solid #6076cc; 
 
    border-radius: 10px; 
 
    font-size: 12px; 
 
    margin-top: 35px; 
 
} 
 

 
    [1]: https://i.stack.imgur.com/2QxOA.jpg

<main> 
 
     <div class="item"> 
 
      <img src="images/StormTrooper.png" alt="" /> 
 
      <h3>Return of the Jedi</h3> 
 
      <p>E P I S O D E 6</p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="images/R2D2.png" alt="" /> 
 
      <h3>The Force Awakens</h3> 
 
      <p>E P I S O D E 7</p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="images/Falkon.png" alt="" /> 
 
      <h3>The Last Jedi</h3> 
 
      <p>E P I S O D E 8</p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
    </main>

Answer 2

に応じて、それはあなたの画像サイズは、あなたのマークアップをめちゃくちゃにしても、見出しと段落タグにマージンさ

.item img { 
    width: 100px; 
    height:100px; 
    display: inline; 
} 

Answer 3

問題を解決するイメージに高さを適用し、私は、あなたが提供されたコードのチェックをいくつかのCSSを変更しましたそれアウトは、役に立つかもしれません

HTML

<main> 
     <div class="item"> 
      <img src="images/StormTrooper.png" alt="" /> 
      <h3>Return of the Jedi</h3> 
      <p>E P I S O D E 6</p> 
      <button type="button" name="button">Watch Now</button> 
     </div> 
     <div class="item"> 
      <img src="images/R2D2.png" alt="" /> 
      <h3>The Force Awakens</h3> 
      <p>E P I S O D E 7</p> 
      <button type="button" name="button">Watch Now</button> 
     </div> 
     <div class="item"> 
      <img src="images/Falkon.png" alt="" /> 
      <h3>The Last Jedi</h3> 
      <p>E P I S O D E 8</p> 
      <button type="button" name="button">Watch Now</button> 
     </div> 
    </main> 

CSS

@import "https://fonts.googleapis.com/css?family=Lato"; 
* { 
    margin: 0; 
    padding: 0 
} 

main { 
    font-family: Lato, sans-serif; 
    background: #729fcf; 
    padding: 20px; 
    display: flex; 
    justify-content: center; 

} 

.item { 
    background: #f0ebff; 
    width: 300px; 
    height: 350px; 
    margin: 20px; 
    text-align: center; 
    padding: 20px; 
    box-sizing: border-box; float: left; 

} 

.item img { 
    width: 100px; 
    display: inline; 
    height: 120px; 
    padding-bottom: 70px; 
} 

.item h3 { 
    text-transform: uppercase; 
} 

.item p { 
    font-size: 12px; 
} 

.item button { 
    background: 0; 
    padding: 10px; 
    border: 3px solid #6076cc; 
    border-radius: 10px; 
    font-size: 12px; 
    margin-top: 35px; 
} 

ここでは、あなたがイメージとして.item imgと.item h3のheightが異なる高さのものであってもよいし、テキストは、異なる長さのものであってもよい指定する必要がFiddle

Answer 4

.item位置に入れる：相対。あなたがこれを行うことができます とより：

.item button { 
    position:absolute; 
    bottom:10px; 
    background: 0; 
    border: 3px solid #6076cc; 
    border-radius: 10px; 
    font-size: 12px; 
} 

これは、ボタンが、私はあなたのCSSでのいくつかの変更で異なるサイズの画像を追加した.item

Answer 5

の底から10pxのことになります。ボタンは、画像サイズがどのようなものであれインラインのままです。画面のサイズを変更し、より長い見出しを使用してテストします。ここにはFiddleがあります。

@import "https://fonts.googleapis.com/css?family=Lato"; 
 
* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
main { 
 
    font-family: Lato, sans-serif; 
 
    background: #729fcf; 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    background: #f0ebff; 
 
    width: 200px; 
 
    margin: 20px; 
 
    text-align: center; 
 
    padding: 20px; 
 
    box-sizing: border-box; float: left; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
.item img { 
 
    margin: auto 0; 
 
    width: 100%; 
 
    display: inline; 
 
} 
 

 
.item h3 { 
 
    text-transform: uppercase; 
 
    margin: 15px 0; 
 
} 
 

 
.item p { 
 
    margin: 5px 0; 
 
}

<main> 
 
     <div class="item"> 
 
      <img src="http://www.seobook.com/images/smallfish.jpg" alt="" /> 
 
      <h3>Return of the Jedi</h3> 
 
      <p>E P I S O D E 6 </p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://png.icons8.com/material/1600/00897B/sailing-ship-small" alt="" /> 
 
      <h3>The Force Awakens</h3> 
 
      <p>E P I S O D E 72345</p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
     <div class="item"> 
 
      <img src="https://en.opensuse.org/images/4/49/Amarok-logo-small.png" alt="" /> 
 
      <h3>The Last Jedi</h3> 
 
      <p>E P I S O D E 8</p> 
 
      <button type="button" name="button">Watch Now</button> 
 
     </div> 
 
    </main>