在屏幕尺寸上對齊圖像和div

我正在嘗試設計我的第一個網站，並且我無法對齊我的頂部酒吧css以與我的徽標對齊，我有一種感覺我正在做這個錯誤，因爲根據用戶的屏幕大小它也會看起來與固定高度的css值不同。在屏幕尺寸上對齊圖像和div

這是我希望它看起來像所有的屏幕resoloutions：

這是它看起來像一個較低的屏幕解析度：

下面

是我的標記：

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

，或者你可以查看它住在this online location

來源

2017-07-27 Dean

的問題是，你的logo圖像，會當你在小屏幕上縮水。因爲圖片必須適合在.left div上設置的寬度10%。

現在，我不會改變你的整個結構，但我建議你將50px的高度設置爲.logo（圖像周圍的div）和background-color: #EEB84F。這是因爲topbar設置了這些樣式。

然後你就可以居中logo IMG利用顯示：彎曲上logo

見下面摘錄或小提琴>jsFiddle

.logo { 
 
    min-height:50px; 
 
    background:#EEB84F; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 

 
h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    min-width: 100%; 
 
    width: auto; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

作爲一個建議，你應該把.topbar在left和right div之外。並把它放在裏面的標誌。

你的結構應該是這樣的

<div class="topbar"> 
    <div class="logo"> 
      <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /> 
    </div> 
</div> 
<div class="content"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
</div>

也不知道爲什麼你需要一個left DIV，你可以很容易地做出gray部分，而沒有一個新的div（邊界或僞元素等）

來源

2017-07-27 08:10:52

歡呼了詳細的解答。我現在得到了她的工作。 – Dean

很高興我能幫上忙。歡呼！：D –

如果您希望徽標始終位於頂部而沒有重疊，則可以將該徽標圖像的特定高度設置爲大約height: 50px。否則，請使用媒體查詢爲較低的分辨率設置其高度。

來源

2017-07-27 08:13:30 kmg

如果您爲徽標圖像設置高度：50px，則必須設置「width：auto」，以便圖像與原始圖像具有相同的縱橫比。因此，徽標的寬度將超出可用空間的寬度，從而超出容器的範圍 –

你只需要增加高度.logo相同的高度.topbar + padding。然後在.logo的中心使用transform對齊圖像，如果需要，您可能需要在特定的屏幕分辨率下使用媒體查詢。

h1 { 
 
    color: #111; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    letter-spacing: -1px; 
 
    line-height: 1; 
 
    padding: 20px; 
 
} 
 

 
h2 { 
 
    color: #111; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 30px; 
 
    font-weight: 300; 
 
    line-height: 32px; 
 
    margin: 0 0 72px; 
 
    text-align: center; 
 
} 
 

 
p { 
 
    color: #685206; 
 
    font-family: 'Helvetica Neue', sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    margin: 0 0 24px; 
 
    text-align: justify; 
 
    text-justify: inter-word; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-size: 20px; 
 
} 
 

 
.topbar { 
 
    background-color: #EEB84F; 
 
    width: 100%; 
 
    height: 40px; 
 
    padding: 5px; 
 
    position: fixed; 
 
} 
 

 
.logo { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #EEB84F; 
 
} 
 

 
.logo > img { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    margin-top: -50px; 
 
} 
 

 
.thumbwrapper { 
 
    width: auto; 
 
} 
 

 
.thumb { 
 
    background: white; 
 
    float: left; 
 
    margin: 20px; 
 
} 
 

 
.thumb { 
 
    width: 121px; 
 
    height: 174px; 
 
} 
 

 
.img { 
 
    box-shadow: 10px 10px 5px #888888; 
 
    max-width: 100%; 
 
    width: 121px; 
 
    height: 174px; 
 
    border-radius: 6px; 
 
} 
 

 
.img:hover { 
 
    box-shadow: 10px 10px 5px #666688; 
 
    cursor: pointer; 
 
} 
 

 
.left { 
 
    width: 10%; 
 
    height: 100%; 
 
    position: fixed; 
 
    outline: 1px solid; 
 
    background: #333; 
 
} 
 

 
.right { 
 
    width: 90%; 
 
    height: auto; 
 
    outline: 0px solid; 
 
    position: absolute; 
 
    right: 0; 
 
    background: #FFF; 
 
}

<div class="left"> 
 
    <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="topbar"></div> 
 
    <h1>Latest Additions</h1> 
 
    <div class="wrapper"> 
 
    <div class="thumbwrapper"> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div> 
 
     <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-27 08:21:54 frnt

在屏幕尺寸上對齊圖像和div

回答

相關問題