无法在具有相同类的 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>

所以当前的输出是：

问题是 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

相应地对图像应用高度它会解决问题

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

Answer 2

你的图片大小弄乱了你的标记以及标题和段落标记的边距，我在你提供的代码中修改了一些 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 3

您必须指定 .item img 和 .item h3 的 height，因为图像的高度和文本的长度可能不同。

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

添加到 .item position:relative；而且你可以这样做：

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

这将使按钮距 .item 底部 10px

Answer 5

我添加了不同尺寸的图像，并在您的 CSS 中进行了一些更改。无论图像大小如何，按钮都将保持内联。通过调整屏幕大小和更长的标题来测试它。这是 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>

无法在具有相同类的 3 个 div 内内联按钮

Cannot inline buttons inside 3 divs with the same classes

html

css

inline

无法在具有相同 类 的 3 个 div 内内联按钮

Cannot inline buttons inside 3 divs with the same classes

html

css

inline

无法在具有相同类的 3 个 div 内内联按钮