1
ウェブページが正常に表示されます。ただし、ブラウザウィンドウのサイズを変更すると、コンテナのコンテンツが上下にプッシュされます。したがって、多くのコンテナの空き領域が残ったり、消えたりする(次のコンテナの下にあるように)。コンテナの内容がウィンドウのサイズに比例して変更される
しかし、私はそれが常に同じ割合で容器の内部になりたいです。ここで
私のコードです:JSFiddleはjQueryの1.11.1では動作しませんなぜ私にはわからない
.first {
padding-left: 5%;
}
.second {
padding: 80px 50px 0px 70px;
background-size: cover;
}
.fourth {
margin-top: 7%;
}
.third {
padding-top: 80px;
padding-bottom: 65px;
height: 678px;
position: relative;
width: 100%;
min-height: auto;
overflow-y: hidden;
background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
background-size: cover;
}
.selling-text {
font-family: Ubuntu;
font-size: 20px;
padding-top: 27%;
text-align: center;
color: black;
margin-left: 2%;
}
.second-block {
background: #F2EADC;
height: 500px;
background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
<div class="col-md-6">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<div class="fourth">
<button type="button" class="button btn-block">MENU</button>
</div>
</div>
</div>
</div>
<div class="second-block container-fluid">
<div class="col-md-6">
<div class="screen">
<p class="selling-text">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
</p>
</div>
</div>
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
、それは私がそれをローカルに接続する表示と異なる見えます。
ああ、それだけです!どうもありがとうございました!あなたは私をたくさん助けました! –
@LeraZemlyanaya私はあなたを助けることができてうれしいです:)それはあなたが一度やって覚えているそれらのものだと思います – tech4242
はい、まさに! :) –