家長不會與兒童內容縮放

我有一個問題，我相信是一個簡單的修復，但我真的不知道如何。家長不會與兒童內容縮放

如果你看圖片，我想排除「白色」，並讓外邊框和藍色背景相對於內容（電影+電影的內部黑色邊框）成爲（我假設）。我的班級「BoxModel」是包含電影的盒子，其大小取決於電影。我只是希望外邊框（在這種情況下類邊框）也相應地移動到「BoxModel」的大小，但顯然它（高度）保持在那裏，而BoxModel從電影中移開。

OBS：我已經標記了圖片，所以很清楚什麼是什麼類。如果你想要的CSS，我可以提供它。 下面是HTML

<head> 
    <title>Emilz kys recensions sida 1.0 </title> 
    <link href="CSS/Recension.css" rel="stylesheet" type="text/css"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://code.jquery.com/jquery-3.2.1.js"> </script> 
    <script src="JS/imdb.js"></script> 
    <script src="JS/Navbar.js"></script> 
</head> 
<body> 

    <div class="border"> 
     <div class='nav'> 
     <ul> 
      <!-- Hem --> 
      <li><a href='Hem.html'>Hem</a></li> 
      <!-- Filmer --> 
      <li> 
       <a href='Filmer.html'>Filmer</a> 
       <ul> 
        <li><a href='FilmRecension.html'>Recension</a></li> 
        <li><a href='FilmSlumpad.html'>Slumpa Film</a></li> 
       </ul> 
      </li> 
      <!-- Serier --> 
      <li> 
       <a href='Serier.html'>Serier</a> 
       <ul> 
        <li><a href='SerieRecension.html'>Recension</a></li> 
        <li><a href='SerieSlumpad.html'>Slumpa Serie</a></li> 
       </ul> 
      </li> 
      <!-- Om oss --> 
      <li><a href='Om oss.html'>Om oss</a></li> 
      <li class='lamp'><span></span></li> 
     </ul> 
     <h1 class="Logo">Recension Sidan<span class="glyphicon glyphicon-film"></span></h1> 
     </div> 
     <br> 
     <div class="BoxModel"> 
      <!-- Början på filmgalleriet --> 

        <!-- Family Guy --> 
        <section> 
        <figure> 
        <a href="FilmInfo.html" alt="movie001" title="movie-001"><img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNGRkMTllZTUt[email protected]._V1_UY268_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Family Guy</figcaption> 
        </figure> 
        <!-- Game of Thrones --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie002" title="movie-002"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Game of Thrones</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie003" title="movie-003"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie004" title="movie-004"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie005" title="movie-005"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie006" title="movie-006"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie007" title="movie-007"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie008" title="movie-008"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie009" title="movie-009"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie010" title="movie-010"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure> 
        <!-- Slumdog Millionaire --> 
        <figure> 
        <a href="FilmInfo.html" alt="movie011" title="movie-011"><img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_UX182_CR0,0,182,268_AL_.jpg"></a> 
        <figcaption>Slumdog Millionaire</figcaption> 
        </figure>     
        </section> 

       <!-- Slutet på filmgalleriet --> 
     </div> 
    </div> 
</body> 
</html>

下面是CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700); 

h1{ 
    font-family: "Times New Roman"; 
    text-align:center; 
    font-size:40px; 
    color: white; 
    font-weight: bold; 
} 
.MovieThumbnail{ 
    width: 70%; 
    height:70%; 
} 
.Logo{ 

    color:white; 
    position:absolute; 
    left: 70%; 
    top:22px; 
    font-size: 2vw; 
    } 
.border{ 
    background-color: #222; 
    border-left: 20px solid rgba(13, 13, 13, 0.5); 
    border-right: 20px solid rgba(13, 13, 13, 0.5); 
    width: 70%; 
    height: 100%; 
    margin: 0 auto; 
    position:relative; 
    /* border-radius: 0px 0px 30px 30px; */ 

} 
.BoxModel{ 
    background-color: rgba(13, 13, 13, 0.5); 
    border: 10px solid #222; 
    border-radius: 15px; 
    padding: 20px; 
    margin: 25px; 

} 
.clear { 
    clear: both; 
} 
.TextContent{ 
    color: #CBCBCB; 
    font-family: "Times New Roman"; 
    font-size:110%; 
} 
.container{ 
    width:100%; 
    height:100%; 
    position:relative; 
} 
.white{ 
    color:white; /* Möjligtvis rätt onödig.. */ 
} 
.searchButton{ 

    position:relative; 
    width:100%; 
    background-color: #178086; /* Orange- & Brown ish #178086 */ 
    border: none; 
    color: white; 
    padding: 9px 24px; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 18px; 
    text-align: center; /* texten är align center utan denna kodrad.... */ 
    border-radius: 6px; 
    /* border: 2px solid #222; */ /* Lägger en ram på knappen, ser sådär ut xD */ 
    -webkit-transition-duration: 0.4s; /* Safari */ 
    transition-duration: 0.4s; 
    text-decoration: none; 
    overflow: hidden; 
    cursor: pointer; 
    outline:none; /* Tar bort den blåa ramen när man klickar på en knapp. */ 
} 
.searchButton:hover{ 
    background-color:#178086; 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 
} 
.searchButton:after { 
    content: ""; 
    background: #f1f1f1; 
    display: block; 
    position: absolute; 
    padding-top: 300%; 
    padding-left: 350%; 
    margin-left: -20px !important; 
    margin-top: -120%; 
    opacity: 0; 
    transition: all 0.6s 
} 
.searchButton:active:after { 
    padding: 0; 
    margin: 0; 
    opacity: 1; 
    transition: 0s 
} 
.movieInput{ 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    box-sizing: border-box; 
    border: 3px solid #ccc; 
    -webkit-transition: 0.5s; 
    transition: 0.5s; 
    outline: none; 
} 
.movieInput:focus { 
    border: 3px solid #555; 
} 
.nav a{ 
    text-decoration:none; 
} 
.nav{ 
    width:100%; 
    height:70px; 
    background:#222; 
    position:relative; 
    margin: 0 auto; 
    /* border-bottom: 5px solid #178086; */ 
} 
.btn btn-primary btn-block{ 
    color: red; 
} 
.nav>ul{ 
    position:relative; 
    list-style:none; 
    padding:0; 
    margin:0; 
} 
.nav>ul>li>ul{ 
    position:absolute; 
    left:0; 
    padding:0; 
    margin:0; 
    list-style:none; 
} 
.nav>ul>li:hover>ul li a{ 
    opacity:1; 
    height:50px; 
    transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear; 
} 
.nav>ul>li>ul a{ 
    display:block; 
    color:#222; 
    width:150px; 
    line-height:50px !important; 
    font:700 14px 'pt sans',sans-serif; 
    background:#eee; 
    border-bottom:1px solid #ddd; 
    text-align:center; 
    padding:0 5px; 
    height:0; 
    overflow:hidden; 
    opacity:0; 
    transition:all .3s linear .2s; 
    -o-transition:all .3s linear .2s; 
    -moz-transition:all .3s linear .2s; 
    -webkit-transition:all .3s linear .2s; 
} 
.nav>ul>li{ 
    float:left; 
    position:relative; 
} 
.nav>ul>li>a{ 
    padding:0 20px; 
    color:#fff; 
    display:block; 
    line-height:70px !important; 
    font:400 15px 'PT Sans', sans-serif; 
    text-transform:uppercase; 
    text-decoration:none; 
} 
.lamp span{ 
    display:block; 
    height:4px; 
    background: #178086; /*#ee6666;*/ 
    position: relative; 
} 
.lamp span:after { 
    bottom: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    border-color: rgba(238, 102, 102, 0); 
    border-bottom-color: #178086; 
    border-width: 4px; 
    margin-left: -4px; 
} 
.lamp{ 
    position:absolute !important; 
    height:4px; 
    top:66px; 
    background:#333; 
    transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear; 
} 
.selected.active>a,.active>a{ 
    transition:all .3s linear; 
    -o-transition:all .3s linear; 
    -moz-transition:all .3s linear; 
    -webkit-transition:all .3s linear; 
    color:#fff; 
} 
.credit{ 
    text-align:center; 
    margin:20px 0; 
} 
.blog-link{ 
color:#fff; 
text-decoration:none; 
background:#eee; 
background-size:40px; 
line-height:50px; 
display:inline-block; 
padding:0 10px; 
border-radius:4px; 
border-bottom:3px solid #ddd; 
color:#333; 
font-family:'open sans',sans-serif; 
margin:10px; 
} 
.dgithub{ 
color:#fff; 
text-decoration:none; 
background:#eee url('https://lh6.googleusercontent.com/-MOW-T0KLZJI/UyR6EIggYkI/AAAAAAAAEbM/el92Uoxz-aI/s50-no/GitHub-Mark.png') no-repeat; 
background-size:40px; 
line-height:50px; 
display:inline-block; 
padding:0 10px 0 50px; 
background-position:5px; 
border-radius:4px; 
border-bottom:3px solid #ddd; 
color:#333; 
font-family:'open sans',sans-serif; 
margin:10px; 
} 
#loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    z-index: 1; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid #3498db; 
    width: 120px; 
    height: 120px; 
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 
/* Add animation to "page content" */ 
.animate-bottom { 
    position: relative; 
    -webkit-animation-name: animatebottom; 
    -webkit-animation-duration: 1s; 
    animation-name: animatebottom; 
    animation-duration: 1s 
} 
@-webkit-keyframes animatebottom { 
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 } 
} 
@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 } 
} 
#myDiv { 
    display: none; 
    text-align: center; 
} 
/*------------------------------Start FilmerOchSerier.html CSS------------------------------*/ 
body,html,h1,h2,p, div,a,img,header,footer,span,section,nav,aside,article,figure,figcaption{ 
    margin: 0; 
    padding: 0; 
} 
html{ 
    height:100%; 
    font-size: 15px; 
} 
body{ 
    background-size:100% 100%; 
    background-image:url(../Bilder/BackgroundBlurred.jpg); // BAKGRUNDSBILD TILL HELA HEMSIDAN 
    width:100%; /* kan förstöra mkt xD */ 
    /* height:100%; xd */ 
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
    background-repeat: no-repeat; 

    } 
section{ 
    width:100%; /* gör ingen skillnad för tillfället */ 
    /* box-shadow: 0 0 10px 2px #ccc; */ /*Detta är en vit "shadow" som visar ramen på section elementet. */ 
    padding: 1rem 0; 
} /* #178086 blååe*/ 
figure{ 
    width: calc(80%/4); 
    float: left; 
    position: relative; 
    margin-bottom: 1rem; 
} 
section::after,section::before{ 
    content: ""; 
    display: block; 
} 
section::after{ 
    clear: both; 
} 
figure a{ 
    display: block; 
    width: calc(100% - 2rem); 
    margin-left: 1rem; 
} 
figure img{ 
    width: 100%; 
    vertical-align: middle; 
    margin-bottom: 0; 
    /* Border till filmthumbnail */ 
    border-left: solid 5px #178086; 
    border-right: solid 5px #178086; 
    border-top: solid 5px #178086; 
    border-radius: 8px 8px 0px 0px; 
} 
figcaption{ 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    background: #178086; 
    color: #222; 
    text-align: center; 
    padding: .7rem; 
    margin: 0 1rem 1rem; 
} 
/* Hanterar fontstorleken samt antal filmer per rad, beroende på hemsidans bredd */ 
@media only screen and (max-width:1024px){ 
    html{ 
     font-size: 14px; 
    } 
    figure{ 
     width: calc(100% /3); 
    } 
} 
@media only screen and (max-width:840px){ 
    html{ 
     font-size: 12px; 
    } 
    figure{ 
     width: calc(100% /3); 
    } 
} 
@media only screen and (max-width:640px){ 
    html{ 
     font-size: 11px; 
    } 
    figure{ 
     width: calc(100% /2); 
    } 
} 
@media only screen and (max-width:400px){ 
    html{font-size: 10.5px;} 
    figure{ 
     width:100%; 
    } 

} 
/*------------------------------Slut FilmerOchSerier.html CSS------------------------------*/ 

/*------------------------------Start FilmInfo.html CSS------------------------------*/ 
.moviePoster{ 
    width: calc(100% /3.5); 
    vertical-align: middle; 
    margin-bottom: 0; 
    /* Border till filmthumbnail */ 
    border-left: solid 3px #178086; 
    border-right: solid 3px #178086; 
    border-top: solid 3px #178086; 
    border-bottom: solid 3px #178086; /* Orange/brown: #178086; Darkgrey: */ 
    border-radius: 5px; 
} 
/*------------------------------Slut FilmInfo.html CSS------------------------------*/ 

/*------------------------------Start Om oss.html CSS------------------------------*/ 
.OmOssBild{ 
    max-width: 670px; /*Ramen kan aldrig bli större än bilden*/ 
    max-height: 409px; 
    width: 100%; 
    height: 100%; 
    background-image: url("../Bilder/DumDummare1.jpg"); 
    background-size: 100% 100%; 
    border: 2px solid #178086; 
    border-radius: 2px; 
    background-repeat: no-repeat; 

} 
/*------------------------------Slut Om oss.html CSS------------------------------*/

來源

2017-04-14 Slypez

我不知道，因爲你沒有告訴我們你的CSS，但它可能涉及到浮動元素的問題。

當你有浮動項目時，你應該在它們之後使用清除，這樣它可以控制浮動元素的行爲。

所以，你的情況，請嘗試將一個類clear對你關閉BoxModel，其中.clear是前：

.clear { 
    clear: both; 
}

來源

2017-04-14 23:36:31 riandutra

不幸的是，沒有改變什麼，但我會添加到後的CSS。 – Slypez

在關閉「BoxModel」之前，您已將'

'正確地放在了註釋'<！ - Slutetpåfilmgalleriet - >'的哪個位置？ – riandutra

是的，我做到了。但我認爲這個問題與父母，孩子和職位有關。儘管如此，我已經在css中看到了電影。 – Slypez

家長不會與兒童內容縮放

回答

相關問題