將另一個div標籤添加到同一行

我想添加另一個div，但它始終顯示爲第二行..所有我需要所有都是同一行並對齊到對方。將另一個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;

在做一些更新和更改樣式表還是同樣的問題

來源

2016-03-30 Toots

你想添加'。內容-grid'作爲其他div？ –

@Gaurav編輯了CSS .. – Toots

你想在行中添加哪個div？如果它的'.content-grid'然後答案已經給出了。 –

的問題是在你的HTML代碼有一些格失蹤關閉

以下是固定代碼其工作正常

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/

來源

2016-03-30 05:00:19

我可以看到它的3行..如何在同一行添加所有行，例如a，b，c，d， – Toots

你已經使用了'width：33.33％ '使用'寬度：25％'那麼連續4將會出現 –

謝謝高拉夫。它按預期工作 – Toots

入住此代碼示例：

<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

來源

2016-03-30 05:29:13 kothari

如何改變某人的html結構 –

將另一個div標籤添加到同一行

回答

相關問題