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 $1,299</h3>
                         </div>



                        <div class="content-grid-info">
                            <h3>7 nights $1,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;

对样式表进行了一些更新和更改仍存在同样的问题

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 $1,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights $1,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 $1,299</h3>
            </div>
            <div class="content-grid-info">
                <h3>7 nights $1,189</h3>
            </div>
        </div>
    </div>
</div>

检查这个小提琴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 $1,299</h3>
            </div>

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

点击此链接：http://codepen.io/anon/pen/pyrraw

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

2 个答案: