0
Работа с мобильным первым подходом и столкнулись с проблемой странного повторного выравнивания при расширении с мобильного (480) на планшет (768 пикселей).Реагирующая реорганизация Div Issue
Окончательный макет должен выглядеть следующим образом: 
Однако, я вижу это: 
Я понимаю, что это проблема отображения CSS, я могу получить Дисплей: встроенный блок для работы в текстовом сегменте, чтобы выровнять его с обложкой альбома (я должен уменьшить ширину div, хотя), но я не могу заставить Display: встроенный блок применить к третьему div и заставить его выравниваться по правому краю стороны текстового поля. Вот HTML (удаленный ненужный код для этого вопроса). Три соответствующих класса - это «обложка альбома», «info-bar-container» и «dig-box» (молния). Каков наилучший способ решить эту проблему?
Благодарим за помощь!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/img/favicon.ico" />
<title>UNCVRD</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- Font awesome icons -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<!-- Ionicons -->
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- HTML5 shiv and REspond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Music Feed -->
<section id="music-feed">
<div class="song-container">
<div class="album-artwork">
<img class="sc-artwork" src="https://i1.sndcdn.com/artworks-000182929734-focihg-t500x500.jpg">
<div class="album-dark-overlay">
<div class="ranking-triangle"></div>
<i class="icon ion-ios-play"></i>
</div>
</div>
<div class="info-bar-container">
<div class="info-bar">
<div class="info-bar-text">
<div class="artist-name">Echos - Gold</div>
<div class="curator-name">Curated by <a class="curator-link" href="">UNCVRD</a></div>
</div>
</div>
<div class="dig-box">
<i class="icon ion-ios-bolt balanced"></i>
</div>
</div>
</div>
</section>
</section>
<!-- Bootstrap Core Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS stylesheet!
/* Reference Palette
Background: #dedede
Grey font: #b9b9b9
*/
/* ==== General ==== */
html {
font-family: 'Open Sans', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background: #dedede;
font-family: 'Open Sans', sans-serif;
}
h4 {
margin: 0;
padding: 0;
}
/* ==== Navigation Bar ==== */
.navbar {
position: relative;
margin-bottom: 16px;
}
.navbar-toggle {
padding: 0;
border: none;
border-radius: none;
margin: 13px 0 0 16px;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar-brand {
position: absolute;
left: 50%;
margin-left: -53.5px !important;
padding: 0;
display: block;
font-size: 30px;
color: black;
}
.dropdown-menu {
color: black;
}
.navbar .nav > li > a {
color: black;
border-top: 1px solid #dedede;
}
ul.nav.navbar-nav.navbar-right {
margin-bottom: 0;
margin-top: -7.5px;
}
.container-fluid > .navbar-collapse {
margin-top: 3.25px;
}
/* ==== FEED ==== */
#feed {
width: 480px;
margin: auto;
}
/* ==== Playlist Mode ==== */
.playlist-header {
margin-bottom: 16px;
}
.playlist-select {
margin-bottom: 16px;
display: flex;
max-width: 260px;
}
.discovery-mode {
padding-right: 8px;
padding-left: 8px;
min-width: 130px;
font-size: 14px;
height: 30px;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 30px;
}
.playlist-choice {
flex: 1;
min-width: 130px;
height: 30px;
font-size: 14px;
border: 2px solid #fff;
text-align: center;
vertical-align: middle;
line-height: 26px;
}
/* ==== Music Feed ==== */
#music-feed {
margin-top: 16px;
width: 448px;
}
.song-container {
width: 100%;
height: 220px;
margin-bottom: 16px;
}
.song-container:last-child {
margin-bottom: 82px;
}
.album-artwork {
width: 100%;
height: 155px;
overflow: hidden;
position: relative;
}
.sc-artwork {
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
min-height: 100%;
min-width: 100%;
}
.info-bar-container {
display: flex;
}
.album-dark-overlay {
/* background-color: rgba(0, 0, 0, 0.25);*/
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 77.5px;
color: #dedede;
}
.ranking-triangle {
width: 0;
height: 0;
position: relative;
border-style: solid;
border-width: 38px 38px 0 0;
border-color: #fff transparent transparent transparent;
}
.ranking {
top: 0;
right: 0;
width: 38px;
text-align: left;
}
.info-bar {
width: 90%;
max-width: 484px;
height: 65px;
background-color: white;
display: table;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 65px;
max-height: 65px;
}
.ion-ios-bolt {
color: #dedede;
font-size: 30px;
}
.ion-ios-bolt:hover {
color: black;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.ion-ios-play {
font-size: 80px;
color: white;
opacity: 1;
}
.ion-ios-play:hover {
color: #b9b9b9;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
/* ...and now for the proper property */
transition: .5s;
}
.info-bar-text {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
}
#music-feed .artist-name {
font-size: 16px;
font-weight: 600;
margin-left: 16px;
}
#music-feed .curator-name {
font-size: 14px;
color: #b9b9b9;
margin-left: 16px;
}
.curator-link {
color: black;
}
.curator-link:hover {
color: black;
text-decoration: none;
}
/* ==== Progress Bar ==== */
#progress-bar-container {
position: fixed;
bottom: 60px;
left: 0;
}
#progress-bar-container .container-fluid {
margin: 0;
padding: 0;
height: 6px;
}
.progress-background {
width: 100%;
height: 6px;
background-color: #b9b9b9;
position: fixed;
}
.progress-bar {
width: 40%;
height: 6px;
background-color: #000;
position: fixed;
z-index: 1;
}
/* ==== Bottom Music Bar ==== */
#music-bar {
width: 100%;
height: 60px;
background: white;
position: fixed;
bottom: 0;
left: 0;
}
#music-bar .container-fluid {
padding: 0;
height: 60px;
}
.music-control-container {
font-size: 28px;
height: 60px;
display: inline-flex;
line-height: 60px;
text-align: center;
vertical-align: middle;
}
#music-bar .ion-ios-rewind {
margin-left: 16px;
}
#music-bar .ion-pause {
margin: 0 12px;
}
#music-bar .ion-ios-fastforward {
margin-right: 0px;
}
#music-bar .album-artwork {
float: right;
height: 30px;
width: 30px;
margin: 15px 0 15px 15px;
padding: 0;
position: relative;
}
.music-control-container img {
width: auto;
height: auto;
vertical-align: top;
width: 100%;
height: 100%;
}
#music-bar .song-name {
font-size: 13px;
font-weight: 600;
margin-left: 15px;
}
/* ==== Custom Media Queries ==== */
@media only screen and (min-width: 768px) {
#feed {
width: 768px;
margin: auto;
}
#music-feed {
width: 736px;
}
.song-container {
height: 160px;
}
.album-artwork {
width: 160px;
height: 160px;
margin-right: -4px;
display: inline-block;
}
.info-bar-container {
width: 576px;
display: inline-block;
}
.info-bar {
max-width: 576px;
height: 160px;
}
.dig-box {
width: 10%;
background-color: white;
text-align: center;
line-height: 160px;
max-height: 160px;
}
}