Отзывчивый сетки макет

Question

мне интересно, если кто-то может помочь, я пытаюсь получить последнюю панель статьи бежать вдоль стороны изображения, и на самом деле изо всех сил, вот пример страницы

http://www.g7g20.com/articles/winnie-byanyima-the-civil-society-contribution

и код следующим образом:

{tag_image} {tag_copyright} {tag_author изображение} {tag_author био} {tag_author изображение 2} {tag_author био 2} {tag_author изображение 3} {tag_author био 3} @ {tag_twitter ручка} ВЕБСАЙТОВ Опубликовано
{tag_releasedate} Доля
{ module_contentholder, имя = "Поделись"} {tag_description}

<div class="four columns side-bar"> 
    <div class="ad-rotator-side{tag_disable side bar banner}">{tag_side bar banner code}<br /> 
    </div> 
    <div>{module_contentholder,name="latest list"} 
     <br /> 
     <p>&nbsp;</p> 
    </div> 

    <div> {module_contentholder,name="Subscribe Form article"} 
     <br /> </div> 
     <div> 
     {module_contentholder,name="Latest comment"} 
     </div> 
     </div> 
</div> 

Я попытался вложить столбцы, и это действительно имело желаемый эффект, но я знаю, что не рекомендуется использовать сетку скелета, так как да ширина столбца вложенных столбцов сокращается.

Благодаря

JP

Answer 1

гнездящихся в статье изображения, данные статьи, и левой панели внутри одного DIV, вероятно, самый простой и лучший способ для этого, как это будет легче сделать вещи отзывчивым - вы просто нужно назначить им некоторые дополнительные классы, чтобы ширина отображалась правильно.

Если вы действительно не хотите гнездовые вещи, то вы можете изменить боковую панель, так что сидит внутри relative расположенного контейнера, наряду с содержанием статьи ... затем установить его на position: absolute;right: 0; я издевался sample pen here и протестировал его в указанном вами URL-адресе.

Это работает, и я надеюсь, что это поможет, но я все же думаю, что вложение - лучший способ пойти!

section { 
 
    max-width: 960px; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
.eight-col { 
 
    width: 66.666%; 
 
    float: left; 
 
    background: aliceblue; 
 
} 
 
.eight-col img{ 
 
    display: block; 
 
    width: 100%; 
 
    margin-bottom: 15px; 
 
} 
 
.four-col { 
 
    width: 33.333%; 
 
    position: absolute; 
 
    background: lightpink; 
 
    right: 0; 
 
    height: 600px; 
 
} 
 
.two-col { 
 
    width: 16.666%; 
 
    float: left; 
 
    clear: both; 
 
} 
 
.two-col img{ 
 
    width: 100%; 
 
} 
 
.six-col { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
}

<section class="clearfix"> 
 
    <article class="eight-col"> 
 
    <img src="http://placehold.it/350x150"> 
 
    </article> 
 
    <div class="two-col"><img src="http://placehold.it/120x120">Author info goes here</div> 
 
    <div class="six-col"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> 
 
    </article> 
 
    <aside class="four-col"> 
 
    <ul> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    <li>list item</li> 
 
    </ul> 
 
    </aside> 
 
</section>

EDIT:

Новая ручка с вложенными перевалы для содержания - FYI, это очень похоже на начальной загрузки структуры колонки ... вместо того, чтобы воссоздать то, что используют уже там, чтобы сделать то, что вам нужно! Bootstrap nesting columns

Alternate pen here