无法从 Drupal 样式表内联获取 div

Question

在我开始之前，我想说的是，我已经尽职尽责地阅读了 div 内联放置的规则。我了解浮动和显示（内联、块和内联块）之间的区别。我已尝试将包含我想要内联的内容的 divs 定位到很大程度的特异性，但没有结果。要么我错过了我应该定位的 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}

编辑：在听取了 Joshua Whitley 的建议后，我已经能够将所有内容内联，但这并不是我想要的。

#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 为目标并使它们都具有足够的特异性（甚至 !important）以覆盖您站点中的所有其他样式，您还有更多的块级元素（更多 div） ) 在它们里面默认为 display:block，占据容器宽度的 100%，导致 .views-row-1 和 .views-row-2 展开以包含它们。

首先，您应该将其中一些元素更改为语义上更合适的元素（p、span 等），并且您可能需要覆盖它们的默认行为。

查看 http://www.impressivewebs.com/difference-block-inline-css/ 了解更多信息和这两种元素的示例。

无法从 Drupal 样式表内联获取 div

Trouble getting divs inline from within Drupal Stylesheet

html

css

drupal