從Drupal樣式表內嵌入div的問題

Question

在我開始之前，我只想說我已經嘗試在閱讀有關放置div的內聯規則時進行一些盡職調查。我理解浮動和顯示之間的區別（內聯，塊和內聯塊）。我試圖以很大程度上針對包含我希望內聯的內容的div，但沒有結果。要麼我錯過了我應該定位的class/id名稱，要麼我錯過了繼承樣式的位置，這使我無法獲得結果。我也不確定它是否是Drupal問題，儘管我不相信它是如此。這是一個視圖塊，如果有問題，我正在使用Nodequeue。任何幫助將非常感謝！

<div id="block-views-front-listing-block" class="block block-views no-title" > 
    <div class="view view-front-listing view-id-front_listing view-display-id-block customize-front-l view-dom-id-c7e9bbbe5f8b7d663eb76fc6da64aa95"> 
     <div class="view-content"> 
      <div class="views-row views-row-1 views-row-odd views-row-first"> 
       <div class="views-field views-field-field-image">   
        <div class="field-content"> 
         <img typeof="foaf:Image" class="image-style-medium-large" src="http://mysite.dd:8083" /> 
        </div> 
       </div> 
       <div class="views-field views-field-title">   
        <span class="field-content"><a href="/content/image-1">Some Location 1</a></span> 
       </div> 
       <div class="views-field views-field-field-price">   
        <div class="field-content">Cost Per Month</div> 
       </div> 
      </div> 
      <div class="views-row views-row-2 views-row-even views-row-last"> 
       <div class="views-field views-field-field-image">   
        <div class="field-content"> 
         <img typeof="foaf:Image" class="image-style-medium-large" src="http://http://mysite.dd:8083" width="380" height="231" alt="Image-2" /> 
        </div> 
       </div> 
       <div class="views-field views-field-title">   
        <span class="field-content"><a href="/content/image-2">Some other location</a></span> 
       </div> 
       <div class="views-field views-field-field-price">   
        <div class="field-content">Cost Per Month</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

再次感謝你，我在這一點上絕望。我已經花了兩天時間對此做了介紹，我不以此爲榮。

我的目標是內聯獲取div容器類「views-row-1」和「views-row-2」。

* All styling below is default css for this responsive site at screen pixel  sizes of 1025px and greater */ 
.container {width:100%;max-width:1140px} 
#content-column,.content-column,div.sidebar {float: left; clear: none} 
.two-sidebars .content-inner {margin-left: 25%; margin-right: 25%} 
.sidebar-first .content-inner {margin-left: 25%; margin-right: 0} 
.sidebar-second .content-inner {margin-right: 25%; margin-left: 0} 
.region-sidebar-first {width: 25%; margin-left: -100%} 
.region-sidebar-second {width: 25%; margin-left: -25%} 
.at-panel .region {display:inline;float:left} 
.two-brick > .panel-row {float:none} 
.two-brick > .panel-row > .region,.two-50 > .region,.three-50-25-25 > div.region-three-50-25-25-first,.three-25-50-25 > div.region-three-25-50-25- second,.three-25-25-50 > div.region-three-25-25-50-third,.five-5x20 > .row-1 div.region-five-first,.five-5x20 .row-1 div.region-five-second {width:50%} 
.two-66-33 > .region-two-66-33-first,.two-33-66 > .region-two-33-66-second,.three-inset-right > .inset-wrapper > div.region-three-inset-right-middle,.three-inset-left > .inset-wrapper > div.region-three-inset-left-middle {width:66.666666%} 
.two-66-33 > .region-two-66-33-second,.two-33-66 > .region-two-33-66-first,.three-inset-right > .inset-wrapper > div.region-three-inset-right-inset,.three-inset-left > .inset-wrapper > div.region-three-inset-left-inset,.three-3x33 > .region,.five-5x20 > .panel-row > .region {width:33.333333%} 
.three-inset-right > .region-three-inset-right-sidebar,.three-inset-left > .region-three-inset-left-sidebar,.three-50-25-25 > .region,.three-25-50-25 > .region,.three-25-25-50 > .region {width:25%} 
.three-inset-right > .inset-wrapper {width:75%;float:left} 
.three-inset-right > .inset-wrapper > .region,.three-inset-left > .inset-wrapper > .region {width:100%} 
.three-inset-left > .region-three-inset-left-sidebar,.three-inset-left > .inset-wrapper,.three-inset-left > .inset-wrapper > .region-three-inset-left-middle {float:right} 
.three-inset-left > .inset-wrapper {width:75%} 
.six-6x16 > .panel-row {width:33.333333%;float:left} 
.six-6x16 > .panel-row > .region,.five-5x20 > .panel-row {float:none;display:block;width:100%;clear:both} 
.four-4x25 > .panel-row > .region,.four-4x25 > .panel-row {width:50%;float:left} 

編輯： 採取約書亞惠特利的意見後，我已經能夠在線得到的一切，但是這不正是我想要的。

#block-views-front-listing-block { 
display:inline; 
} 
.customize-front-l .views-row-1 { 
display:inline; 
} 
.customize-front-l .views-row-2 { 
display:inline; 
} 
.customize-front-l .views-field { 
display:inline; 
} 
.customize-front-l .field-content { 
display:inline; 
} 

如果我改變其中的任何一切，基本上都會回到水平堆疊的方式。我希望位置和價格低於圖片，無需做CSS體操。任何進一步的提示將非常感激。

Answer 1

您的問題很可能是由於對塊級與內聯元素的誤解。即使您將.views-row-1和.views-row-2作爲目標，並使它們都具有足夠的特性（甚至重要）以覆蓋站點中的其他所有風格，您還有更多的塊級元素（更多div ）將默認顯示：block，佔用容器寬度的100％，導致.views-row-1和.views-row-2展開以包含它們。

首先，您應該將這些元素中的一些更改爲更適合語義的元素（p，span等），您可能需要覆蓋其默認行爲。

查看http://www.impressivewebs.com/difference-block-inline-css/瞭解更多信息和這兩種元素類型的例子。