我目前正在以 1024px 媒体大小实现 CSS 媒体查询，我试图通过放置 flex: nowrap; 将链接的右侧移动到 div 中，但它不起作用。我也试过 margin-right: 20px; 也没有用。有没有办法让它发挥作用？
map 图像是否有可能将右侧的链接列推到其 div 之外？
HTML
<div class="row m_activeMap">
<div class="col-lg">
<div class="j_img-overlay"><img src="imgs/img-overlay.png" alt="Seek the World! | SVRS"></div>
<div class="j_map-interfaces">
<div id="mapTX" class="mapActive"><img src="imgs/map-TX.png" alt="Seek the World - Texas" class="m_map"></div>
<div id="mapLA" class="mapActive"><img src="imgs/map-LA.png" alt="Seek the World - Louisiana" class="m_map"></div>
<div id="mapMI" class="mapActive"><img src="imgs/map-MI.png" alt="Seek the World - Mississippi" class="m_map"></div>
<div id="mapAL" class="mapActive"><img src="imgs/map-AL.png" alt="Seek the World - Alabama" class="m_map"></div>
<div id="mapGA" class="mapActive"><img src="imgs/map-GA.png" alt="Seek the World - Georgia" class="m_map"></div>
<div id="mapFL" class="mapActive"><img src="imgs/map-FL.png" alt="Seek the World - Florida" class="m_map"></div>
<div id="mapSC" class="mapActive"><img src="imgs/map-SC.png" alt="Seek the World - South Carolina" class="m_map"></div>
<div id="mapNC" class="mapActive"><img src="imgs/map-NC.png" alt="Seek the World - North Carolina" class="m_map"></div>
<div id="mapVA" class="mapActive"><img src="imgs/map-VA.png" alt="Seek the World - Virginia" class="m_map"></div>
<div id="mapMD" class="mapActive"><img src="imgs/map-MD.png" alt="Seek the World - Maryland" class="m_map"></div>
<div id="mapWV" class="mapActive"><img src="imgs/map-WV.png" alt="Seek the World - West Virginia" class="m_map"></div>
</div>
</div>
<div class="col-lg-3" style="max-width: 228px;">
<div class="j_linkHeader"><img src="imgs/link-header.png" alt="Seek the location below!"></div>
<div id="j_mapLinks" class="j_linksCol">
<ul class="j_linkLocation">
<li class="j_linkHover is-active">
<a href="#mapTX" class="j_linkThumb"> Austin, TX</a>
<p class="j_accordion-panel">Texas School for the Deaf<br>1234 Congress Ave, <br>Austin, TX 78753<br>
<span class="j_dateLocation">Feb 7, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapLA" class="j_linkThumb"> Shreveport, LA</a>
<p class="j_accordion-panel">Shreveport School for the Deaf<br>1234 Easy Ave, <br>Shreveport, LA 68753<br>
<span class="j_dateLocation">Feb 18, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapMI" class="j_linkThumb"> Jackson, MI</a>
<p class="j_accordion-panel">Jackson School for the Deaf<br>1234 NoWay Ave, <br>Jackson, MI 58753<br>
<span class="j_dateLocation">Feb 18, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapAL" class="linkThumb"> Mobile, AL</a>
<p class="j_accordion-panel">Mobile School for the Deaf<br>1234 Whoo Ave, <br>Mobile, AL 48753<br>
<span class="j_dateLocation">Feb 25, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapGA" class="j_linkThumb"> Atlanta, GA</a>
<p class="j_accordion-panel">Atlanta School for the Deaf<br>1234 Ouch Ave, <br>Atlanta, GA 48753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapFL" class="j_linkThumb"> Jacksonville, FL</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapSC" class="j_linkThumb"> Charleston, SC</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapNC" class="j_linkThumb"> Charlotte, NC</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapVA" class="j_linkThumb"> Washington DC, VA</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapMD" class="j_linkThumb"> Baltimore, MD</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
<li class="j_linkHover">
<a href="#mapWV" class="j_linkThumb"> Morgantown, WV</a>
<p class="j_accordion-panel">Jacksonville School for the Deaf<br>1234 You Ave, <br>Jacksonville, FL 38753<br>
<span class="j_dateLocation">Mar 12, 2018</span></p>
</li>
</ul>
</div>
</div>
CSS(1024 像素)
@media screen and (min-width:1024px) {
.j_row-bgcolor {
flex-wrap: nowrap;
margin-right: 20px;
}
}
CSS
.m_activeMap {
flex-wrap: nowrap;
}
.j_accordion-panel {
display: none;
margin: 5px 0 15px 25px;
}
.j_dateLocation {
margin: -10px 0 15px 0;
}
ul.j_linkLocation {
list-style: none;
list-style-type: none;
}
.j_linkLocation li {
margin-bottom: 5px;
margin-left: -15px;
}
a.j_linkLocation {
text-decoration: none;
}
ul.j_linkLocation li a {
height: 20px;
background: url(../imgs/pin-hover.png) no-repeat;
padding-left: 25px;
}
ul.j_linkLocation li.j_linkHover a {
background-position: 0 1px;
}
ul.j_linkLocation li.j_linkHover a:hover {
background-position: 0 -20px;
}
.col-lg-3 {
background: #354756;
margin: 0;
padding: 0;
width: 100%;
height: 644px;
}
.j_linksCol {
height: 511px;
}
.j_linkCol ul {
margin-left: 0;
}
.j_linkHeader {
margin: 0 10px 20px 10px;
text-align: center;
}
.j_linkHeader img {
padding-top: 20px;
}
.j_linkThumb {
cursor: pointer;
font-weight: normal;
&::before {
content: '';
display: inline-block;
height: 7px;
width: 7px;
transition: transform .2s ease-out;
}
}
最佳答案
我解决了这个问题。我将 width: 95%; 设置为最小化 map 图像的大小，并将右侧的链接面板拉回到 div 中。
关于css - Flex nowrap 在 1024px 媒体查询版本中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48529330/