我创建标题部分时遇到了问题。
对于分辨率 > 1020 的设备没问题:
问题是分辨率变小了:
我需要第二部分的标题在列表上方。
我尝试替换 .title 和 .subcategories 顺序，但是更大的分辨率 .title 将不会右对齐。
我正在使用 display: table-cell，因为我需要垂直对齐内容并为 .title 指定一个自动宽度。
我的代码在这里:
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{font-family:'Open Sans',sans-serif;font-weight:400}a{color:#333;text-decoration:none;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.bg-w{background:#fff}.bg-g{background:#f9f9f9}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}@media screen and (min-width:690px){.ba-sm{border-style:solid;border-width:1px}.bt-sm{border-top-style:solid;border-top-width:1px}.br-sm{border-right-style:solid;border-right-width:1px}.bb-sm{border-bottom-style:solid;border-bottom-width:1px}.bl-sm{border-left-style:solid;border-left-width:1px}.bn-sm{border-style:none;border-width:0}}@media screen and (min-width:1020px){.ba-md{border-style:solid;border-width:1px}.bt-md{border-top-style:solid;border-top-width:1px}.br-md{border-right-style:solid;border-right-width:1px}.bb-md{border-bottom-style:solid;border-bottom-width:1px}.bl-md{border-left-style:solid;border-left-width:1px}.bn-md{border-style:none;border-width:0}}.bw-1{border-width:1px}.bw-2{border-width:2px}@media screen and (min-width:690px){.bw-1-sm{border-width:1px}.bw-2-sm{border-width:2px}}@media screen and (min-width:1020px){.bw-1-md{border-width:1px}.bw-2-md{border-width:2px}}.category .category-header{border-color:#ff7e22}.category .category-header .title h2{color:#1f41b1;font-size:38px;font-size:2.375rem}.category .category-header .subcategories{border-color:#ff7e22}.category .category-header .subcategories ul li{border-right:1px solid #d1d1d1}.category .category-header .subcategories ul li:last-child{border-right:none}.category .category-header .subcategories ul li a:hover{color:#ff7e22}.category.pink .category-header{border-color:#fa5575}.category.pink .category-header .title-strip{background:#fa5575}@media screen and (min-width:690px){.category .category-header .subcategories{padding-left:calc((100% - 630px)/ 2);padding-right:calc((100% - 630px)/ 2)}}@media screen and (min-width:1020px){.category .category-header{z-index:10}.category .category-header .title{height:190px}.category .category-header .title:before{display:block;content:'';width:100%;height:2px;background:#fff;position:absolute;top:-2px;left:0}.category .category-header .title h2{white-space:nowrap}.category .category-header .subcategories{height:190px;padding-left:40px;padding-right:40px}.category .category-header .subcategories:before{display:block;content:'';width:100%;height:490px;background:#f9f9f9;position:absolute;top:0;left:0}.category .category-header .subcategories ul{z-index:20}.category .category-header .title-strip{width:calc((100% - 1020px)/ 2);height:40px;background:#ff7e22;top:calc(50% - 20px)}.category .category-content{z-index:20}.category.left .category-header:after,.category.left .category-header:before{display:block;content:'';width:calc((100% - 960px)/ 2);min-width:30px;position:absolute}.category.left .category-header:before{height:calc(100% + 2px);background:#fff;top:-2px;left:0}.category.left .category-header:after{height:490px;background:#f9f9f9;top:0;right:0}.category.left .category-header .title{padding-right:100px;padding-left:0;text-align:left}.category.left .category-header .title:after{display:block;content:'';width:48px;height:50%;border-left:2px dotted #1b2956;position:absolute;top:25%;right:0}.category.left .category-header .subcategories ul{text-align:left}.category.left .category-header .subcategories ul li{border-right:none;border-left:1px solid #d1d1d1}.category.left .category-header .title-strip{left:0}.category.right .category-header:after,.category.right .category-header:before{display:block;content:'';width:calc((100% - 960px)/ 2);min-width:30px;position:absolute}.category.right .category-header:before{height:calc(100% + 2px);background:#fff;top:-2px;right:0}.category.right .category-header:after{height:490px;background:#f9f9f9;top:0;left:0}.category.right .category-header .title{padding-left:100px;padding-right:0;text-align:right}.category.right .category-header .title:after{display:block;content:'';width:48px;height:50%;border-right:2px dotted #1b2956;position:absolute;top:25%;left:0}.category.right .category-header .subcategories ul{text-align:right}.category.right .category-header .subcategories ul li{border-right:1px solid #d1d1d1}.category.right .category-header .title-strip{right:0}}.container{width:100%;max-width:690px;padding-right:30px;padding-left:30px;margin:0 auto}@media screen and (min-width:1020px){.container{max-width:1020px}}@media screen and (min-width:690px){.container-sm{width:100%;max-width:690px;padding-right:30px;padding-left:30px;margin:0 auto}}@media screen and (min-width:1020px){.container-md{width:100%;max-width:1020px;padding-right:30px;padding-left:30px;margin:0 auto}}.dn{display:none}.db{display:block}.di{display:inline}.dib{display:inline-block}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}@media screen and (min-width:690px){.dn-sm{display:none}.db-sm{display:block}.di-sm{display:inline}.dib-sm{display:inline-block}.dt-sm{display:table}.dtc-sm{display:table-cell}.dt-row-sm{display:table-row}}@media screen and (min-width:1020px){.dn-md{display:none}.db-md{display:block}.di-md{display:inline}.dib-md{display:inline-block}.dt-md{display:table}.dtc-md{display:table-cell}.dt-row-md{display:table-row}}.fl{float:left}.fr{float:right}.fn{float:none}@media screen and (min-width:690px){.fl-sm{float:left}.fr-sm{float:right}.fn-sm{float:none}}@media screen and (min-width:1020px){.fl-md{float:left}.fr-md{float:right}.fn-md{float:none}}.fw-400{font-weight:400}.fw-700{font-weight:700}@media screen and (min-width:690px){.fw-400-sm{font-weight:400}.fw-700-sm{font-weight:700}}@media screen and (min-width:1020px){.fw-400-md{font-weight:400}.fw-700-md{font-weight:700}}.h-250{height:250px}.h-550{height:550px}.h-600{height:600px}@media screen and (min-width:690px){.h-250-sm{height:250px}.h-550-sm{height:550px}.h-600-sm{height:600px}}@media screen and (min-width:1020px){.h-250-md{height:250px}.h-550-md{height:550px}.h-600-md{height:600px}}.list{list-style-type:none}.ma-0{margin:0}.ma-10{margin:10px}.ma-15{margin:15px}.ma-30{margin:30px}.ma-50{margin:50px}.ma-60{margin:60px}.mt-0{margin-top:0}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-30{margin-top:30px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mr-0{margin-right:0}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-30{margin-right:30px}.mr-50{margin-right:50px}.mr-60{margin-right:60px}.mb-0{margin-bottom:0}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-30{margin-bottom:30px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.ml-0{margin-left:0}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-30{margin-left:30px}.ml-50{margin-left:50px}.ml-60{margin-left:60px}.mh-0{margin-right:0;margin-left:0}.mh-10{margin-right:10px;margin-left:10px}.mh-15{margin-right:10px;margin-left:15px}.mh-30{margin-right:30px;margin-left:30px}.mh-50{margin-right:50px;margin-left:50px}.mh-60{margin-right:60px;margin-left:60px}.mv-0{margin-top:0;margin-bottom:0}.mv-10{margin-top:10px;margin-bottom:10px}.mv-15{margin-top:15px;margin-bottom:15px}.mv-30{margin-top:30px;margin-bottom:30px}.mv-50{margin-top:50px;margin-bottom:50px}.mv-60{margin-top:60px;margin-bottom:60px}@media screen and (min-width:690px){.ma-0-sm{margin:0}.ma-10-sm{margin:10px}.ma-15-sm{margin:15px}.ma-30-sm{margin:30px}.ma-50-sm{margin:50px}.ma-60-sm{margin:60px}.mt-0-sm{margin-top:0}.mt-10-sm{margin-top:10px}.mt-15-sm{margin-top:15px}.mt-30-sm{margin-top:30px}.mt-50-sm{margin-top:50px}.mt-60-sm{margin-top:60px}.mr-0-sm{margin-right:0}.mr-10-sm{margin-right:10px}.mr-15-sm{margin-right:15px}.mr-30-sm{margin-right:30px}.mr-50-sm{margin-right:50px}.mr-60-sm{margin-right:60px}.mb-0-sm{margin-bottom:0}.mb-10-sm{margin-bottom:10px}.mb-15-sm{margin-bottom:15px}.mb-30-sm{margin-bottom:30px}.mb-50-sm{margin-bottom:50px}.mb-60-sm{margin-bottom:60px}.ml-0-sm{margin-left:0}.ml-10-sm{margin-left:10px}.ml-15-sm{margin-left:15px}.ml-30-sm{margin-left:30px}.ml-50-sm{margin-left:50px}.ml-60-sm{margin-left:60px}.mh-0-sm{margin-right:0;margin-left:0}.mh-10-sm{margin-right:10px;margin-left:10px}.mh-15-sm{margin-right:10px;margin-left:15px}.mh-30-sm{margin-right:30px;margin-left:30px}.mh-50-sm{margin-right:50px;margin-left:50px}.mh-60-sm{margin-right:60px;margin-left:60px}.mv-0-sm{margin-top:0;margin-bottom:0}.mv-10-sm{margin-top:10px;margin-bottom:10px}.mv-15-sm{margin-top:15px;margin-bottom:15px}.mv-30-sm{margin-top:30px;margin-bottom:30px}.mv-50-sm{margin-top:50px;margin-bottom:50px}.mv-60-sm{margin-top:60px;margin-bottom:60px}}@media screen and (min-width:1020px){.ma-0-md{margin:0}.ma-10-md{margin:10px}.ma-15-md{margin:15px}.ma-30-md{margin:30px}.ma-50-md{margin:50px}.ma-60-md{margin:60px}.mt-0-md{margin-top:0}.mt-10-md{margin-top:10px}.mt-15-md{margin-top:15px}.mt-30-md{margin-top:30px}.mt-50-md{margin-top:50px}.mt-60-md{margin-top:60px}.mr-0-md{margin-right:0}.mr-10-md{margin-right:10px}.mr-15-md{margin-right:15px}.mr-30-md{margin-right:30px}.mr-50-md{margin-right:50px}.mr-60-md{margin-right:60px}.mb-0-md{margin-bottom:0}.mb-10-md{margin-bottom:10px}.mb-15-md{margin-bottom:15px}.mb-30-md{margin-bottom:30px}.mb-50-md{margin-bottom:50px}.mb-60-md{margin-bottom:60px}.ml-0-md{margin-left:0}.ml-10-md{margin-left:10px}.ml-15-md{margin-left:15px}.ml-30-md{margin-left:30px}.ml-50-md{margin-left:50px}.ml-60-md{margin-left:60px}.mh-0-md{margin-right:0;margin-left:0}.mh-10-md{margin-right:10px;margin-left:10px}.mh-15-md{margin-right:10px;margin-left:15px}.mh-30-md{margin-right:30px;margin-left:30px}.mh-50-md{margin-right:50px;margin-left:50px}.mh-60-md{margin-right:60px;margin-left:60px}.mv-0-md{margin-top:0;margin-bottom:0}.mv-10-md{margin-top:10px;margin-bottom:10px}.mv-15-md{margin-top:15px;margin-bottom:15px}.mv-30-md{margin-top:30px;margin-bottom:30px}.mv-50-md{margin-top:50px;margin-bottom:50px}.mv-60-md{margin-top:60px;margin-bottom:60px}}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}@media screen and (min-width:690px){.overflow-hidden-sm{overflow:hidden}.overflow-x-hidden-sm{overflow-x:hidden}.overflow-y-hidden-sm{overflow-y:hidden}}@media screen and (min-width:1020px){.overflow-hidden-md{overflow:hidden}.overflow-x-hidden-md{overflow-x:hidden}.overflow-y-hidden-md{overflow-y:hidden}}.pa-0{padding:0}.pa-15{padding:15px}.pa-20{padding:20px}.pa-30{padding:30px}.pa-50{padding:50px}.pt-0{padding-top:0}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pt-50{padding-top:50px}.pr-0{padding-right:0}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-30{padding-right:30px}.pr-50{padding-right:50px}.pb-0{padding-bottom:0}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pb-50{padding-bottom:50px}.pl-0{padding-left:0}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-30{padding-left:30px}.pl-50{padding-left:50px}.ph-0{padding-right:0;padding-left:0}.ph-15{padding-right:15px;padding-left:15px}.ph-20{padding-right:20px;padding-left:20px}.ph-30{padding-right:30px;padding-left:30px}.ph-50{padding-right:50px;padding-left:50px}.pv-0{padding-top:0;padding-bottom:0}.pv-15{padding-top:15px;padding-bottom:15px}.pv-20{padding-top:20px;padding-bottom:20px}.pv-30{padding-top:30px;padding-bottom:30px}.pv-50{padding-top:50px;padding-bottom:50px}@media screen and (min-width:690px){.pa-0-sm{padding:0}.pa-15-sm{padding:15px}.pa-20-sm{padding:20px}.pa-30-sm{padding:30px}.pa-50-sm{padding:50px}.pt-0-sm{padding-top:0}.pt-15-sm{padding-top:15px}.pt-20-sm{padding-top:20px}.pt-30-sm{padding-top:30px}.pt-50-sm{padding-top:50px}.pr-0-sm{padding-right:0}.pr-15-sm{padding-right:15px}.pr-20-sm{padding-right:20px}.pr-30-sm{padding-right:30px}.pr-50-sm{padding-right:50px}.pb-0-sm{padding-bottom:0}.pb-15-sm{padding-bottom:15px}.pb-20-sm{padding-bottom:20px}.pb-30-sm{padding-bottom:30px}.pb-50-sm{padding-bottom:50px}.pl-0-sm{padding-left:0}.pl-15-sm{padding-left:15px}.pl-20-sm{padding-left:20px}.pl-30-sm{padding-left:30px}.pl-50-sm{padding-left:50px}.ph-0-sm{padding-right:0;padding-left:0}.ph-15-sm{padding-right:15px;padding-left:15px}.ph-20-sm{padding-right:15px;padding-left:20px}.ph-30-sm{padding-right:30px;padding-left:30px}.ph-50-sm{padding-right:50px;padding-left:50px}.pv-0-sm{padding-top:0;padding-bottom:0}.pv-15-sm{padding-top:15px;padding-bottom:15px}.pv-20-sm{padding-top:20px;padding-bottom:20px}.pv-30-sm{padding-top:30px;padding-bottom:30px}.pv-50-sm{padding-top:50px;padding-bottom:50px}}@media screen and (min-width:1020px){.pa-0-md{padding:0}.pa-15-md{padding:15px}.pa-20-md{padding:20px}.pa-30-md{padding:30px}.pa-50-md{padding:50px}.pt-0-md{padding-top:0}.pt-15-md{padding-top:15px}.pt-20-md{padding-top:20px}.pt-30-md{padding-top:30px}.pt-50-md{padding-top:50px}.pr-0-md{padding-right:0}.pr-15-md{padding-right:15px}.pr-20-md{padding-right:20px}.pr-30-md{padding-right:30px}.pr-50-md{padding-right:50px}.pb-0-md{padding-bottom:0}.pb-15-md{padding-bottom:15px}.pb-20-md{padding-bottom:20px}.pb-30-md{padding-bottom:30px}.pb-50-md{padding-bottom:50px}.pl-0-md{padding-left:0}.pl-15-md{padding-left:15px}.pl-20-md{padding-left:20px}.pl-30-md{padding-left:30px}.pl-50-md{padding-left:50px}.ph-0-md{padding-right:0;padding-left:0}.ph-15-md{padding-right:15px;padding-left:15px}.ph-20-md{padding-right:20px;padding-left:20px}.ph-30-md{padding-right:30px;padding-left:30px}.ph-50-md{padding-right:50px;padding-left:50px}.pv-0-md{padding-top:0;padding-bottom:0}.pv-15-md{padding-top:15px;padding-bottom:15px}.pv-20-md{padding-top:20px;padding-bottom:20px}.pv-30-md{padding-top:30px;padding-bottom:30px}.pv-50-md{padding-top:50px;padding-bottom:50px}}.absolute{position:absolute}.relative{position:relative}@media screen and (min-width:690px){.absolute-sm{position:absolute}.relative-sm{position:relative}}@media screen and (min-width:1020px){.absolute-md{position:absolute}.relative-md{position:relative}}.tc{text-align:center}.tl{text-align:left}.tr{text-align:right}.tj{text-align:justify}@media screen and (min-width:690px){.tc-sm{text-align:center}.tl-sm{text-align:left}.tr-sm{text-align:right}.tj-sm{text-align:justify}}@media screen and (min-width:1020px){.tc-md{text-align:center}.tl-md{text-align:left}.tr-md{text-align:right}.tj-md{text-align:justify}}.ttu{text-transform:uppercase}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@media screen and (min-width:690px){.w-10-sm{width:10%}.w-20-sm{width:20%}.w-25-sm{width:25%}.w-30-sm{width:30%}.w-40-sm{width:40%}.w-50-sm{width:50%}.w-60-sm{width:60%}.w-70-sm{width:70%}.w-80-sm{width:80%}.w-90-sm{width:90%}.w-100-sm{width:100%}.w-third-sm{width:33.33333%}.w-two-thirds-sm{width:66.66667%}.w-auto-sm{width:auto}}@media screen and (min-width:1020px){.w-10-md{width:10%}.w-20-md{width:20%}.w-25-md{width:25%}.w-30-md{width:30%}.w-40-md{width:40%}.w-50-md{width:50%}.w-60-md{width:60%}.w-70-md{width:70%}.w-80-md{width:80%}.w-90-md{width:90%}.w-100-md{width:100%}.w-third-md{width:33.33333%}.w-two-thirds-md{width:66.66667%}.w-auto-md{width:auto}}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}@media screen and (min-width:690px){.v-base-sm{vertical-align:baseline}.v-mid-sm{vertical-align:middle}.v-top-sm{vertical-align:top}.v-btm-sm{vertical-align:bottom}}@media screen and (min-width:1020px){.v-base-md{vertical-align:baseline}.v-mid-md{vertical-align:middle}.v-top-md{vertical-align:top}.v-btm-md{vertical-align:bottom}} <section class="category left w-100 fl mb-30">
<div class="category-header db dt-md w-100 bg-g bt-md bw-2-md fl relative-md">
<div class="container-md">
<div class="title db dtc-md w-100 w-auto-md bg-w tc pa-30 fl fn-md v-mid-md relative-md">
<h2 class="fw-700 ma-0">Sport</h2>
</div>
<div class="subcategories db dtc-md w-100 bt bw-2 bn-md pa-30 fl fn-md v-mid-md relative-md">
<ul class="list tc pa-0 ma-0 relative-md">
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Piłka nożna</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Koszykówka</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Siatkówka</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Piłka ręczna</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Sporty walki</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Inne</a></li>
</ul>
</div>
</div>
<div class="title-strip absolute-md"></div>
</div>
</section>
<section class="category right w-100 fl mb-30 pink">
<div class="category-header db dt-md w-100 bg-g bt-md bw-2-md fl relative-md">
<div class="container-md">
<div class="subcategories db dtc-md w-100 bt bw-2 bn-md pa-30 fl fn-md v-mid-md relative-md">
<ul class="list tc pa-0 ma-0 relative-md">
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Piłka nożna</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Koszykówka</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Siatkówka</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Piłka ręczna</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Sporty walki</a></li>
<li class="dib ph-15 mv-10"><a href="#" class="fw-700 ttu">Inne</a></li>
</ul>
</div>
<div class="title db dtc-md w-100 w-auto-md bg-w tc pa-30 fl fn-md v-mid-md relative-md">
<h2 class="fw-700 ma-0">Edukacja</h2>
</div>
</div>
<div class="title-strip absolute-md"></div>
</div>
</section>最佳答案
我已经把你的 Edukacija 标题放在菜单之前，就像在第一个 Sport 选项中一样，对于大于 1200 像素的屏幕，我在 css 中修改了它
.category.right .category-header .title {
padding: 70px 0 70px 100px; /* for vertical align middle */
text-align: right;
float: right; /* to be placed on right side */
}
查看此 JSFiddle关联。您可以调整 fiddle 窗口的大小以查看结果
关于html - 显示:表格单元格和 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44048691/