Кирпичная кладка с боковой панелью - Загрузочный лот

Страница должна быть разделена на 4 строки. Масонство должно выровнять столбы в пределах 3 рядов. Справа боковая панель будет показана. Это должно быть в последней строке.Кирпичная кладка с боковой панелью - Загрузочный лот

Однако масонство смешивает все и не позволит мне иметь боковую панель справа.

HTML

<div class="container"> 
    <div id="masonry-container" class="row nomargin"> 
      <div class="col-md-9"> 
       <div class="item col-lg-4 col-md-4 col-sm-4"> 
        <!--- Content ---> 
       </div> 
      </div> 
      <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12 rightfloat"> 
       <!--- Sidebar ---> 
      </div> 
    </div> 
</div>

Чтобы очистить его, .rightfloat класс для float: right;

Так Кладка смешать содержимое с боковой панели. Please take a look если это трудно понять. Я попытался изменить HTML и некоторые CSS, но ничто не решает проблему.

Я также попытался с помощью следующих с боковой панели:

<div class="col-md-3 littluft rightfloat">

Это сделало боковую панель поплавок вправо, но тогда это позади другого контента.

Page can be found here.

У вас есть рабочее решение или какие-либо идеи?

Вопрос? Пожалуйста спросите.

источник

2016-01-22 Olen

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

См Nesting Columns

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

Боковая панель внутри вложенных колонок на FullPage.

$('#masonry-container').imagesLoaded(function() { 
 
    $('#masonry-container').masonry({ 
 
    itemSelector: '.item', 
 
    isAnimated: true 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
    overflow-x: hidden; 
 
} 
 
#masonry-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.item { 
 
    padding: 10px; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
} 
 
.sidebar { 
 
    padding: 0px 30px; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #777; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-9"> 
 
     <div class="row"> 
 
     <div id="masonry-container"> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x450" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x450" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="sidebar"> 
 
     <h4> 
 
      Sidebar 
 
     </h4> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

Боковая панель фиксируется на примере позиции Вся страница.

$('#masonry-container').imagesLoaded(function() { 
 
    $('#masonry-container').masonry({ 
 
    itemSelector: '.item', 
 
    isAnimated: true 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
    overflow-x: hidden; 
 
} 
 
.sidebar-fixed { 
 
    margin-top: 50px; 
 
    padding: 0px 5px; 
 
    position: fixed; 
 
    width: 150px; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    color: #777; 
 
} 
 
.main-content { 
 
    margin-right: 150px; 
 
} 
 
#masonry-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.item { 
 
    padding: 10px; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
} 
 
@media (max-width: 768px) { 
 
    .sidebar-fixed { 
 
    width: 100px; 
 
    } 
 
    .main-content { 
 
    margin-right: 100px; 
 
    padding: 0; 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .sidebar-fixed { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
    .main-content { 
 
    margin-right: auto; 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="main-content"> 
 
    <div class="container-fluid"> 
 

 
     <div id="masonry-container"> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="sidebar-fixed"> 
 
    <h4> 
 
    Sidebar 
 
    </h4> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    </div> 
 
</div>

источник

2016-01-22 20:09:36 vanburen

Спасибо большое за такое дополнительное объяснения. Это действительно помогло мне понять и решить проблему. Спасибо :) – Olen

Добро пожаловать и рад, что я мог бы помочь. – vanburen

Кирпичная кладка с боковой панелью - Загрузочный лот

ответ

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