不能內聯內3個div的按鈕具有相同的類

Question

我有3周的div相同的類是這樣的：

<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> 

因此，電流輸出爲：

的問題是，裏面的元素divs不是內聯排序的，也不知道爲什麼。這裏是我的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

您必須指定的.item img的height和.item h3的圖像可能是不同的高度和文本的可能是不同的長度。

@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; 
} 

這裏是一個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>