将另一个 Div 标记添加到同一行

Question

我正在尝试添加另一个 div，但它始终显示为第二行。我只需要全部位于同一行并相互对齐即可。

html代码

        <div class="content-grids">
                    <div class="wrap">
                    <div class="content-grid">

                      <div class="content-grid-info">
                        <h3>All inclusive Packages</h3>
                        <p>Airfares + Accomodation(ocean View) + 3 Meals daily + House Beverages + Activities(incl Kids Club)                           </p>



                      <div class="content-grid-info">
                        <h3>4 nights ,299</h3>
                         </div>



                        <div class="content-grid-info">
                            <h3>7 nights ,189</h3>
                        </div>


                </div>

</div>

CSS

.content-grids{
 padding: 3.5em 0 3.7em 0;
margin:0 0 40px 0px;
}
.content-grid-info p{
    font-size: 0.875em;
    padding: 5px 0 5px 0;
    line-height: 1.5em;

.content-grid-info h3{
    font-size: 1.8em;
    font-weight: 400;

一直在对样式进行一些更新和更改sheet仍然存在同样的问题

Answer 1

问题是您的 html 代码有一些 div 缺少关闭

下面是固定代码，它工作正常

HTML

<div class="content-grids">
    <div class="wrap">
        <div class="content-grid">
            <div class="content-grid-info">
                <h3>All inclusive Packages</h3>
                <p>Airfares + Accomodation(ocean View) + 3 Meals daily + House Beverages + Activities(incl Kids Club)                           </p>
            </div>
            <div class="content-grid-info">
                <h3>4 nights ,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights ,189</h3>
            </div>
        </div>
        <div class="content-grid">
            <div class="content-grid-info">
                <h3>All inclusive Packages</h3>
                <p>Airfares + Accomodation(ocean View) + 3 Meals daily + House Beverages + Activities(incl Kids Club)                           </p>
            </div>
            <div class="content-grid-info">
                <h3>4 nights ,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights ,189</h3>
            </div>
        </div>
    </div>
</div>

检查这个 fiddle https://jsfiddle.net/yudi/yvpfxg8h/

Answer 2

检查此代码示例：

  <div class="content-grids">
    <div class="wrap">
        <div class="content-grid float-left">
            <h3 class="content-grid-info float-left">All inclusive Packages</h3>
            <p class="float-left">Airfares + Accomodation(ocean View) + 3 Meals daily + House Beverages + Activities(incl Kids Club) </p>

            <div class="content-grid-info float-left">
                <h3 class="float-left">4 nights ,299</h3>
            </div>

            <div class="content-grid-info float-left">
                <h3 class="float-left">7 nights ,189</h3>
            </div>
        </div>
    </div>
</div>

检查此 link：http://codepen.io/anon/pen/pyrraw

将另一个 Div 标记添加到同一行

Add another Div tag to the same row

html

css

division

width