У меня есть HTML для приспособлений для игры в крикет, где мне нужно выполнить итерации по данным в моделях. Если в следующей строке я добавлю другой тег div с тем же содержимым, он будет правильно выровнен, но когда я создаю данные моделей, я вижу, что выравнивание меняется для каждой итерации. Это выглядит как изображение , показанное здесь
HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/fixture.css' %}">
</head>
<body>
</header>
<div class="page">
<div id="fb-root"></div>
<div id="page-wrapper" class="container" style="display:inline-block;">
<div id="shosh" class="ad-unit shosh-embed" style="height:0; width:980px; text-align:center;"></div>
<div style="margin-top:5px;"></div>
{% for fixture in fixtures %}
<div class="cb-bg-white cb-schdl cb-col cb-col-100">
<h1 class='cb-schdl-hdr cb-font-24 line-ht30'>Cricket Schedule</h1>
<div id="international-list" class="cb-bg-white">
<div class="cb-col-100 cb-col">
<div class="cb-lv-grn-strip text-bold">{{fixture.date}}</div>
<div class="cb-col-100 cb-col">
<div class="cb-col-33 cb-col cb-mtchs-dy text-bold">West Indies tour of England, 2020 (Postponed)</div>
<div class="cb-col-67 cb-col">
<div class="cb-ovr-flo cb-col-60 cb-col cb-mtchs-dy-vnu cb-adjst-lst"> <a href="/live-cricket-scores/23239/eng-vs-wi-1st-test-day-1-west-indies-tour-of-england-2020-postponed" title="ENG vs WI, 1st Test, Day 1 Live Cricket Score">England vs West Indies, 1st Test, Day 1</a>
<div class="cb-font-12 text-gray cb-ovr-flo">Kennington Oval, London</div>
</div>
<div class="cb-col-40 cb-col cb-mtchs-dy-tm cb-adjst-lst"> <span class="schedule-date" timestamp="1591264800000" venue="+01:00" format="h:mm a"></span>
<div class="cb-font-12 text-gray"> <span>10:00 AM</span> GMT /<span> 11:00 AM</span> LOCAL </div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background: #E3E6E3;
font-family: helvetica, "Segoe UI", Arial, sans-serif;
color: #222;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
body,
.cb-comm-pg,
.cb-hm-mid {
min-height: 1000px
}
.container {
width: 980px;
margin: 0 auto;
}
.page {
max-width: 980px;
margin: 0 auto;
position: relative;
}
.cb-col-8 {
width: 8%;
}
.cb-col-10 {
width: 10%;
}
.cb-col-14 {
width: 14%;
}
.cb-col-16 {
width: 16%;
}
.cb-col-20 {
width: 20%;
}
.cb-col-25 {
width: 25%;
}
.cb-col-27 {
width: 27%;
}
.cb-col-33 {
width: 33%;
}
.cb-col-40 {
width: 40%;
}
.cb-col-46 {
width: 46%;
}
.cb-col-47 {
width: 47%;
}
.cb-col-50 {
width: 50%;
}
.cb-col-60 {
width: 60%;
}
.cb-col-66 {
width: 66%;
}
.cb-col-67 {
width: 67%;
}
.cb-col-73 {
width: 73%;
}
.cb-col-75 {
width: 75%;
}
.cb-col-84 {
width: 84%;
}
.cb-col-80 {
width: 80%;
}
.cb-col-90 {
width: 90%;
}
.cb-col-100 {
width: 100%;
}
.cb-col {
display: inline-block;
box-sizing: border-box;
float: left;
min-height: 1px;
}
h1 {
font-size: 36px;
line-height: 42px;
margin: 0;
}
h2 {
font-size: 24px;
margin: 0;
line-height: 30px;
}
h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
}
h4 {
font-size: 16px;
margin: 0;
}
h5 {
font-size: 14px;
margin: 0;
}
.cb-font-18 {
font-size: 18px;
}
img {
border-radius: 4px;
}
a {
text-decoration: none;
color: #222;
}
a,
a:hover,
a:active,
a:focus {
outline: medium none;
}
.text-center {
text-align: center;
}
.cb-nws-lft-col {
padding: 15px 20px;
}
.cb-nws-dtl-lft-col {
padding: 10px 30px 0 30px;
border-right: 1px solid #ecebeb;
}
.cb-nws-lst-rt {
padding-left: 10px;
}
.cb-srs-lst-itm {
padding: 10px 0;
}
.cb-lst-itm-sm {
padding: 10px 0 5px;
}
.cb-scrd-lft-col {
padding: 15px 10px;
}
.cb-col-rt {
padding: 10px;
}
.text-white {
color: #fff;
}
.cb-scrd-hdr-rw,
.cb-nav-pill-1.active {
background: #028062;
color: #fff;
}
.cb-nav {
position: relative;
height: 48px;
background: #009270;
}
.cb-hm-mnu-itm {
padding: 16px 6px 11px;
color: #fff;
display: inline-block;
}
.cb-hm-text {
padding: 10px 18px 10px 20px;
}
.cb-hm-rght {
padding: 15px;
}
.cb-subnav .cb-sub-navigation {
display: none;
position: absolute;
}
.cb-mat-mnu {
background: #4a4a4a;
width: 980px;
font-size: 0;
}
.cb-mat-mnu-itm {
font-size: 12px;
color: #fff;
padding: 10px;
cursor: pointer;
display: inline-block;
max-width: 140px;
}
.cb-mat-mnu-ttl {
background: #333;
padding: 10px 20px;
}
.cb-mat-mnu-wrp {
margin-bottom: 10px;
}
.cb-ovr-flo {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cb-mat-mnu-all {
text-align: center;
float: right;
width: 60px;
}
.cb-nav-main {
border-bottom: 1px solid #e3e6e3;
padding: 0 0 5px 20px;
}
.cb-nav-bar {
padding-top: 10px;
clear: both;
}
.cb-lst-itm,
.cb-bg-white {
background: #fff;
}
.cb-nav-tab.active,
.cb-nav-tab-hm.active {
font-weight: bold;
color: #028062;
}
.cb-nav-tab.active {
border-bottom: 3px solid #028062;
line-height: 24px;
}
.cb-nav-tab-hm.active {
border-bottom: 2px solid #028062;
line-height: 22px;
}
.cb-nav-tab {
margin-right: 20px;
padding-bottom: 6px;
}
.cb-nav-tab-hm {
margin-right: 15px;
padding-bottom: 6px;
}
.cb-nav-hdr {
padding-top: 15px
}
.cb-nav-subhdr {
padding: 5px 0 10px 0;
}
.cb-lv-scr-mtch-hdr {
line-height: 21px;
font-size: 16px;
}
.disp-none {
display: none;
}
.disp-blck {
display: block;
}
.cb-font-24 {
font-size: 24px;
}
.line-ht30 {
line-height: 30px;
}
.line-ht24 {
line-height: 24px;
}
.cb-hm-scg-blk {
background: #fff;
margin-bottom: 5px;
height: 90px;
}
.mrgn-btm-5 {
margin-bottom: 5px;
}
#scagTabContent .show {
display: block;
visibility: visible;
}
#scagTabContent .hide {
display: none;
visibility: hidden;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.cb-hm-lft {
margin-bottom: 5px;
padding: 0 15px;
}
.cb-hm-lft-hdr {
margin: 0;
padding: 15px 15px 0;
color: #009270;
}
.cb-hm-mid {
border-left: 5px solid #e3e6e3;
border-right: 5px solid #e3e6e3;
padding: 0 15px;
}
.cb-mtch-blk {
border-right: 1px solid #ecebeb;
line-height: 1.4;
margin: 15px 0;
padding: 0 20px;
}
.crd-cntxt {
font-size: 12px;
color: #666;
padding-bottom: 10px;
}
.big-crd-main {
border-top: 1px solid #ecebeb;
padding: 15px 0 5px;
margin-bottom: 1px;
clear: both;
}
.big-crd-reltd-itm {
margin: 0 0 10px;
width: 100%;
display: inline-block;
}
.cb-nws-time {
font-size: 12px;
padding-bottom: 5px;
}
.cb-nws-hdln-ancr {
padding-bottom: 5px;
}
.cb-hmscg-bwl-txt,
.cb-hmscg-bat-txt {
font-weight: bold;
padding-bottom: 4px;
height: 18px;
}
.cb-hmscg-bwl-txt {
color: #666;
}
.sml-crd-main {
padding: 15px 0 5px;
width: 100%;
}
.big-crd-hdln {
margin: 10px 0;
}
.big-crd-rltd-txt {
font-weight: bold;
margin: 10px 0;
color: #1866DB;
}
.cb-nws-intr {
color: #666;
padding-bottom: 5px;
}
.cb-lv-scrs-well {
background: #f5f5f5;
display: inline-block;
margin: 10px 0;
padding: 10px 5px;
}
.cb-hm-mtch-crd-width {
min-width: 300px;
}
.cb-mr-30 {
margin-right: 30px;
}
.cb-pretag {
color: #B34A57;
}
.cb-schdl-hdr {
margin: 0;
padding: 15px 0 10px 10px;
}
.cb-lst-itm-lg {
padding: 20px 0;
}
.cb-left-pad {
padding: 20px 10px 0;
}
.cb-nav-pill-1 {
background: #CFE0DB;
border-radius: 20px;
color: #222;
cursor: pointer;
margin-right: 15px;
padding: 5px 20px;
}
.cb-mtch-lst {
padding: 15px 0;
}
.cb-nws-min-cntr {
padding: 10px;
background: #f5f5f5;
color: #333;
margin: 10px 0 15px;
}
.sml-crd-subtxt {
margin: 0 10px 10px;
}
/*-------------------------Live Pages -----------------------*/
.cb-scrcrd-status {
padding: 0 0 10px 10px;
}
.cb-scrd-hdr-rw {
padding: 8px 10px;
}
.cb-bg-gray {
background: #ecebeb;
}
.cb-lv-grn-strip {
background: #ecebeb;
}
.cb-min-hdr-rw,
.cb-scrd-sub-hdr {
padding: 4px 10px;
font-size: 12px;
color: #666;
}
.cb-scrd-itms {
padding: 4px 10px;
font-size: 13px;
}
.cb-text-link {
color: #1866DB;
}
.text-bold {
font-weight: bold;
}
.text-normal {
font-weight: normal;
}
.cb-mat-fct-itm {
padding: 5px 0;
}
.cb-min-bat-rw {
padding-bottom: 5px;
}
.cb-nws-sub-txt,
.cb-nws-sub-txt,
.cb-font-12 {
font-size: 12px;
}
.cb-font-16 {
font-size: 16px;
}
.cb-font-20 {
font-size: 20px;
}
.cb-min-inf {
padding-top: 10px;
margin-left: -10px;
display: inline-block;
}
.cb-min-itm-rw {
padding: 5px 10px 0;
}
.text-right {
text-align: right;
}
.cb-key-st-lst {
padding: 10px 0 0 5px;
}
.cb-min-prw-time {
padding: 20px 0 0;
}
.cb-toss-sts {
padding: 10px 0 30px;
}
.cb-min-rcnt {
padding: 7px 10px;
margin: 0 -10px 0;
}
.cb-key-lst-wrp {
border: 1px solid #ecebeb;
padding-bottom: 15px;
margin-right: -10px;
}
.cb-min-tm {
font-size: 18px;
font-weight: bold;
}
.cb-min-stts {
padding: 20px 0;
}
.cb-mom-itm {
padding: 0 0 10px;
}
.cb-lv-grn-strip {
padding: 10px 10px 5px;
}
.cb-ovr-num {
padding-top: 2px;
}
.cb-min-pad {
padding-left: 5px;
}
/*Upcoming Series*/
.cb-mnth {
margin-top: 10px;
padding: 0 10px;
}
.cb-sch-lst-itm {
padding: 10px 0;
margin-left: 20px;
border-bottom: 1px solid #ecebeb;
}
/*Matches By Day*/
.cb-mtchs-dy {
padding: 20px 20px 20px 10px;
}
.cb-mtchs-dy-tm,
.cb-mtchs-dy-vnu {
padding: 20px 20px 20px 0px;
}
/*Schedule Teams*/
.cb-lv-upcom-strip {
padding: 5px 10px;
background: #ecebeb;
}
/*Archives*/
.cb-srs-cat {
padding: 10px;
color: #028062;
}
.pad-left {
padding-left: 30px;
}
.cb-arcv-yr {
font-size: 20px;
padding: 0 0 5px 10px;
font-weight: bold
}
.cb-yr-tmline {
padding: 2px 15px 15px 0;
}
.cb-sch-tms-widgt {
padding: 5px 10px;
margin: 5px 2px 2px 2px;
background: #f5f5f5;
border-radius: 0;
border: 0;
display: inline-block;
}
/*Photos*/
.cb-thmb-dark {
background: #333333;
box-shadow: none;
border-radius: 4px;
border: none;
padding: 0;
color: #CCC;
}
.cb-pht-main {
padding: 20px 15px;
margin: 0 -10px;
}
.cb-pht-block {
padding: 9px;
float: left;
height: 280px;
box-sizing: border-box;
}
.cb-gallery-pht-block {
padding: 9px 9px 9px 16px;
}
.img-responsive {
height: auto;
max-width: 100%;
}
.center-block {
margin-right: auto;
margin-left: auto;
}
.cb-schdl {
padding: 0 10px;
line-height: 1.5;
}
.cb-caret-up,
.cb-caret-down {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
margin-bottom: 1px;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.cb-caret-up {
border-bottom: 4px solid;
}
.cb-caret-down {
border-top: 4px solid;
}
.cb-hm-rt-itm {
margin: 0 0 5px;
padding: 10px 10px 5px;
}
.cb-hmscg-tm-nm {
display: inline-block;
width: 60px;
}
.pull-right,
.cb-all-mtch-tab {
float: right;
}
.cb-skin-ads-close {
display: none;
}
.cb-nws-sub-txt {
padding-top: 10px;
}
.nws-dtl-hdln {
margin-top: 10px;
}
.cb-min-lv {
min-height: 270px
}
.cb-min-comp {
min-height: 150px;
}
.cb-ttl-vts {
margin-top: 20px;
}
.cb-poll-radio {
width: 5%;
margin: 4px 10px 0 0;
}
.cb-mini-tim {
padding-bottom: 20px;
}
.cb-com-ln {
margin: 0 0 10px;
line-height: 24px;
}
.cb-comm-static {
min-height: 31px;
margin: 0 -10px 10px;
}
.cb-com-ovr-sum-ad {
min-height: 31px;
}
.cb-comm-static-anchr {
margin: 5px 10px;
display: block;
}
.ad-unit-rendered {
margin-bottom: 5px;
}
.cb-mm-wrp {
max-height: 0px;
-webkit-transition: max-height 0.35s ease;
transition: max-height 0.35s ease;
overflow: hidden;
}
.cb-mm-wrp.down {
max-height: 1000px;
transition: max-height 0.75s ease;
-webkit-transition: max-height 0.75s ease;
overflow: hidden;
}
.cb-srs-hstry-dtl {
padding: 10px 15px;
margin-top: 20px;
border-radius: 4px;
}
.cb-qck-lnk {
margin-bottom: 5px;
padding: 10px 15px;
}
.cb-qck-hdr {
padding-right: 15px;
border-right: 1px solid #ecebeb;
}
.cb-qck-ancr {
margin-left: 15px;
}
.cb-lst-vid-rw {
padding-bottom: 0;
height: 64px;
border: 1px solid #ecebeb;
margin-right: -10px;
}
.cb-auth-img {
border-radius: 100%;
}
.cb-expt-athr {
vertical-align: top;
padding: 5px 0 0 0;
display: inline-block;
font-size: 16px
}
.inline-block {
display: inline-block;
}
.cb-exprt-athr-hdr {
text-align: right;
font-size: 42px;
font-family: bodani;
color: #fff;
padding-right: 15px;
line-height: 44px;
text-transform: uppercase;
}
.cb-exprt-athr-hdr-tag {
text-align: right;
font-size: 24px;
font-family: bodani;
color: #fff;
padding-right: 15px;
font-style: italic;
}
.cb-athr-wgt-wrp {
border: 1px solid #ecebeb;
padding: 15px;
margin-bottom: 20px;
background: #f5f5f5;
}
.cb-exprt-athr-hdr-img {
background: url("/images/harsha-banner.jpg") no-repeat scroll;
height: 80px;
}
.cb-overflow-hidden {
overflow: hidden;
}
/*Videos*/
.cb-vid-sm-ply-api {
color: #fff;
line-height: 34px;
font-size: 18px;
margin-left: 3px;
}
.cb-vid-sml-card-api {
margin-top: 10px;
height: auto;
padding: 0 12px 0 11px;
}
.cb-cat-head-wrap {
padding: 0 12px 0 11px;
}
.cb-cat-head-text {
margin-top: 5px;
line-height: 20px;
}
.cb-more-btn {
padding: 8px 20px;
border-radius: 2px;
color: #fff;
background: #009270;
border: 0;
cursor: pointer;
}
.cb-cat-head-link {
float: right;
padding: 5px 25px;
margin-top: 10px;
border-radius: 4px;
}
.cb-pos-rel {
position: relative;
}
.cb-videos-cat {
border-bottom: 1px solid #ecebeb;
padding: 10px 3px 15px 4px;
}
.cb-cat-head-text-wrap {
float: left;
}
.cb-cat-head-count {
margin: 0;
color: #666;
}
h2.cb-cat-head-text {
font-size: 18px
}
.cb-vid-sml-card-api-head {
font-size: 14px;
font-weight: bold;
line-height: 18px;
max-height: 55px;
margin: 2px 0 5px;
overflow: hidden;
}
.cb-cen {
position: absolute;
top: 50%;
left: 50%;
opacity: .8;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
background: #222;
text-align: center;
height: 35px;
width: 35px;
border-radius: 50px;
}
.cb-cen:hover {
opacity: 1;
}
.padding-handling-errors {
padding: 20px 0px 10px 15px;
border-bottom: 1px solid #ecebeb;
}
.cb-col .cb-align-cen {
float: none;
text-align: center;
padding: 7px 25px;
margin-top: 20px;
}
.cb-align-cen {
padding-top: 10px;
}
.cb-hot-cat {
max-width: 90px;
text-align: center;
padding-right: 0;
}
.cb-hot-cat-img {
width: 72px;
}
.cb-vid-slider-arrs {
position: absolute;
top: 52px;
left: 0;
right: 0;
z-index: 5;
}
.cb-vid-slider-arr {
position: absolute;
z-index: 5;
height: 43px;
width: 43px;
border-radius: 50%;
cursor: pointer;
}
.cb-vid-slider-arr-prev {
display: none;
left: 0;
}
.cb-vid-slider-arr-next {
right: 0;
}
.videos-list-carousal {
overflow: hidden;
position: relative;
height: 220px;
}
.videos-carousal-wrapper {
float: none;
list-style: none;
padding: 0;
margin: 0;
transition: all 0.3s ease;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
}
.videos-carousal-item {
min-width: 25%;
justify-content: center;
align-items: center;
}
.cb-vid-more {
float: right;
color: #2C3E9A;
font-size: 18px;
}
.cb-vid-more:hover {
text-decoration: underline;
}
.cat-vid-carousal {
height: 135px !important;
}
.cat-vid-carousal .videos-carousal-item {
min-width: auto;
}
.cat-vid-carousal .cb-vid-slider-arrs {
top: 24px;
}
.cb-srs-sqd-box {
min-height: 700px;
background: #fff;
}
.cb-float-none {
float: none;
}
.cb-margin-top-10 {
margin-top: 10px;
}
.cb-schdl-nvtb {
margin: 0 0 10px 0;
padding: 10px;
}
.cb-carousal-item-small {
padding: 0 0 0 16px;
}
.cb-carousal-item-small:first-child {
padding-left: 11px;
}
.cb-carousal-item-large {
padding: 0 11px;
}
.cb-carousal-item-small .cb-vid-txt-wrp {
font-size: 12px;
}
.cb-hot-cat .cb-vid-txt-wrp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 40px;
}
.cb-more-video {
float: right;
color: #2C3E9A;
}
.cb-more-video:hover {
text-decoration: underline;
}
.home_video .cb-vid-slider-arrs {
opacity: 0.8;
}
/*Rankings*/
.cb-ranking-nav.active {
line-height: 21px
}
.cb-rank-plyr {
padding-left: 15px
}
.text-left {
text-align: left;
}
.cb-rank-tabs {
padding-left: 10px;
}
.cb-plyr-tbody {
padding: 5px 0;
}
.cb-padding-left0 {
padding-left: 0;
}
.cb-rank-hdr {
margin-top: 15px;
padding: 5px 0;
}
.cb-bg-grey {
background: #f5f5f5;
}
/*Players*/
.cb-player-name-wrap {
padding-top: 90px;
}
.cb-plyr-tbl {
margin-top: 30px
}
.cb-font-40 {
font-size: 40px;
}
/*Teams*/
.cb-cursor-pointer {
cursor: pointer;
}
.cb-team-stats-btn {
margin-top: 21px;
}
.cb-upper-text {
text-transform: capitalize;
}
Надеюсь, это поможет ..