如何使4个div组合在一起并排显示？

Question

我有以下html：

seek()

他们一起在我的网站上创建了一个广告。

问题是，如何使它们在桌面视图中并排显示。

除了将它们包装在台式机的媒体查询中之外，我还尝试过

.awpcp-listing-excerpt-inner 
.awpcp-listing-excerpt-extra  
.awpcp-listing-primary-image-thumbnail 
.awpcp-listing-excerpt-content

这具有不希望的效果，即不将div分组在一起并并排显示每个组，而是将广告分为三个独立的部分：左侧为图片，中间为文字，右侧为其他信息。

是否有一些HTML或CSS可以将每个广告或组并排放置？

我有这个HTML显然可以控制页面布局：

{ display: inline-block;} 
{display: inline-block; float: left;

Answer 1

像这样？他们也有反应。

.about-section {
    max-width: 1280px;
    overflow: hidden;
    padding-bottom: 90px;
    margin: 0 auto;
}

.about-section h3 {
    color: #333;
    margin: 90px 0 60px 0;
}


.box {
    box-sizing: border-box;
    width: 22%;
    max-width: 275px;
    height: 275px;
    float: left;
    border: 3px solid #000;
    margin-left: 4%;
}    

#firstBox{
    margin-left: 0px;
}

<div class="about-section" id="about">

    <h3>About us</h3>

    <div class="box" id="firstBox">

        <p>Box one</p>

    </div>

    <div class="box">

        <p>Box two</p>

    </div>

    <div class="box">

        <p>Box three</p>

    </div>

    <div class="box">

        <p>Box four</p>

    </div>

</div>