不能内联内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>