Очень простая панель инструментов на основе HTML/CSS. Ошибка при заполнении неиспользуемого пространства.

Question

Я новичок в разработке веб-сайтов, и я пытаюсь создать очень простую карточную «панель инструментов» в HTML и CSS.

Вы можете увидеть основной пример этого (с вырезанным контентом) на jsfiddle. Как вы можете видеть, у меня есть две основных размеры карты, большие и малые, которые устанавливаются плавать влево и тем самым занять оставшееся место, используя следующие классы CSS:

.small-card, .large-card { 
    border: 1px solid gray; 
    border-radius: 3px; 
    margin: 2px; 
    float: left; 
    width: 250px; 
    height: 250px; 
} 

.small-card { 
    height: 122px; 
} 

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

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

У меня такое чувство, что это будет не просто, но любые предложения оценены. Благодарю.

Answer 1

Для этого используйте bootstrap grid system.

Вот код, используя его вместе с CSS:

.small-card, .large-card { 
 
    border: 1px solid gray; 
 
    border-radius: 3px; 
 
    height: 250px; 
 
} 
 

 
.small-card { 
 
    height: 125px; 
 
} 
 

 

 
}

<div class='row'> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-6 large-card">1</div> 
 
    <div class="col-xs-6"> 
 
    <div class='row'> 
 
    <div class="col-xs-12 small-card">2</div> 
 
    </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12 small-card">3</div> 
 
    </div> 
 
    </div> 
 
    <div class='row'> 
 
     <div class="col-xs-6 small-card">4</div> 
 
     <div class="col-xs-6 small-card">5</div> 
 
    </div> 
 
     <div class="col-xs-6"> 
 
    <div class='row'> 
 
    <div class="col-xs-12 small-card">6</div> 
 
    </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12 small-card">7</div> 
 
    </div> 
 
    </div> 
 
    
 
     <div class="col-xs-6 large-card">8</div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">