2015-02-04 2 views
1

Прежде чем я начну, я просто хотел бы сказать, что я попытался внести должное усердие в чтение о правилах размещения divs inline. Я понимаю разницу между float и display (inline, block и inline-block). Я пробовал настроить таргетинг на большую степень специфичности divs, содержащих контент, который я хотел бы иметь встроенный, но без каких-либо результатов. Либо мне не хватает имени класса/идентификатора, к которому я должен быть нацелен, или мне не хватает, когда унаследован стиль, это не дает мне получить мои результаты. Я также не уверен, что это проблема Drupal, хотя я не считаю, что это так. Это блок представлений, и я использую Nodequeue, если это имеет значение. Любая помощь будет чрезвычайно оценена!Неисправность получения divs inline изнутри Drupal Stylesheet

<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» inline.

* 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} 

Edit: После принятия совета Джошуа Уитли, я был в состоянии получить все инлайн, но это не совсем то, что я хотел.

#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 гимнастику. Любые дополнительные советы будут очень оценены.

+0

может предоставить ur css plz –

+0

или ссылку на веб-сайт, чтобы мы могли проверить код. –

+0

Сайт еще не загружен, но я добавил соответствующий css. Как вы можете видеть, на самом деле нет ничего ориентированного на область, которую я хочу стилизовать. Это еще одна вещь, которая меня озадачила. – Eric

ответ

0

Ваша проблема, вероятно, связана с неправильным пониманием уровня блока и встроенных элементов. Даже если вы нацелитесь на версии .views-row-1 и .views-row-2 и сделаете их как встроенными с достаточной спецификой (или даже важными), чтобы переопределить любой другой стиль с вашего сайта, у вас есть дополнительные элементы уровня блока (больше divs) внутри них, которые по умолчанию будут отображаться: блок, занимающий 100% ширины контейнера, вызывая разворачивание .views-row-1 и .views-row-2, чтобы их содержать.

Во-первых, вы должны изменить некоторые из этих элементов на более семантически соответствующие элементы (p, span и т. Д.), И вам может потребоваться переопределить их поведение по умолчанию.

Оформить заявку http://www.impressivewebs.com/difference-block-inline-css/ для получения дополнительной информации и примеров обоих типов элементов.

+0

Я не могу редактировать html напрямую, поскольку он создан Drupal и установленными модулями. По крайней мере, я не знаю, как я это сделаю. – Eric

+0

Тогда вам нужно будет настроить таргетинг на каждый из разделов ниже тех, которые вы хотите сделать inline, и сделать их встроенными. –

+0

Хорошо, я попробую это прямо сейчас и посмотрю, поможет ли это. Его просто раздражает, потому что я думаю, что мне нужно будет потратить гораздо больше времени на перемещение каждого div внутри этих двух основных разделов позже. Возможно, моим следующим вопросом будет изменение html-разметки на страницах drupal. – Eric

Смежные вопросы