html类不会保持内联

Question

为什么div不会像这样：

HTML：

<div id="NovosProdutos">
    <div id="name">
        <h1>Novos produtos</h1>
    </div>
    <div id="produtos">
        <div class="product"><h1>product 1</h1></div>
        <div class="product"><h1>product 2</h1></div>
        <div class="product"><h1>product 3</h1></div>
    </div>
</div>

CSS：

#name {
    height: 25px;
    font-size: 8px;
    font-family: Georgia, serif;
    border-style: ridge;
    border-color: #38c23d;
    border-width: 0px 0px 2.5px;
}

#produtos {
    height: 190px;
}

.product {
    width:162.5px;
    height: 155px;
}

班级有问题吗？

Answer 1

默认情况下，<div>的显示呈现样式为block。您可能希望使用显示inline的内容，或者为CSS中的给定<div>设置该属性。请参阅：How do you make div elements display inline?

Answer 2

<div>它的性质会转到下一行并且不会相互堆叠

但是你可以添加

float:left;

到您的产品类。

例如： http://codepen.io/nilestanner/pen/OXYPja