Question

我目前正在以1024px媒体大小实现CSS媒体查询，我试图通过放置flex: nowrap;来移动div内部链接的右侧，但它不起作用。我也尝试了margin-right: 20px;，但也没有用。有没有办法让它发挥作用？

地图图片是否可能在其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（1024px）

@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;
    }
}

Answer 1

我解决了这个问题。我将width: 95%;放到最小化地图图像的大小上，然后将右侧链接面板拉回到div内。

Flex nowrap在1024px媒体查询版本中不起作用

1 个答案: