javascript - 将div分成3列

2天前我问了同样的问题，但现在我还是不明白。
我有1个div，我希望将其分为3列div。我知道如何为2列做到这一点，但是，当我尝试3列（右，中和左）时，我得到了：



问题：粉色方块不在中心

这是我的代码：

HTML：

 <div id="our_services" class="container">
    <h1>המוצרים שלנו</h1>
    <div id="try">
        <div id="product1">
        </div>
        <div id="product2">
        </div>
        <div id="product3">
        </div>
    </div>
</div>

CSS：

#our_services {
    /*height: 450px;*/
    text-align: center;
    font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
    color: black;
    background-color: rgb(224,224,224);
    overflow: auto;
    margin: auto;
}

#try {
    background-color: orange;
    width: 50%;
    height: 50%;
    margin: auto;
}

#product1 {
    width: 30%;
    height: 75%;
    background-color: green;
    float: right;
    margin: 5px;
}

#product2 {
    width: 30%;
    height: 75%;
    background-color: pink;
    float: right;
    margin: 5px;
}

#product3 {
    width: 30%;
    height: 75%;
    background-color: blue;
    float: left;
    margin: 5px;
}

最佳答案

请尝试使用display:inline-block;。
exemple

关于javascript - 将div分成3列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29938067/