0
Я не могу понять это: как заставить текст оставаться вместе с изображением после того, как страница сжимается в размере.Как сделать изображение с текстом вместе после изменения размера страницы?
Как вы можете видеть в этом изображении (1):
Его обычно на Lg экран.
Как вы можете видеть в этом изображении (2):
Раздел становится больше и текст «прогонов» далеко от изображения.
Html (половина из них без навигационной панели и 2 секции)
<div id="mint"></div>
<div class="" id="background1">
<div class="container-fluid">
<img class="img-responsive" id="logo1" src="images/logo1.png"/>
</div>
<div class="container-fluid">
<p id="p1" class="" >A great new free psd theme to showcase your<br>new application.</p>
</div>
<div id="sicons">
<a href="https://www.apple.com">
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" src="images/icon1.png"/>
</a>
<a href="https://www.android.com">
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" style="margin-left: -15px; margin-right: -15px;" src="images/icon2.png"/>
</a>
<a href="https://www.microsoft.com">
<img class="img-responsive col-xs-3 col-sm-3 col-md-4 col-lg-4 sicon" src="images/windows3.png"/>
</a>
</div>
</div>
</header>
<section>
<div class="container" id="white">
<div id="icons">
<img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:34%;" src="images/icon4.png"></img>
<p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left:-0%; top:150%;" ><span><b>Editable Theme</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.<br><br><br><br><br></p>
<!--<img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:68%" src="images/icon5.png"></img>
<p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left: 68%; top:125%;" ><span><b>Flat Design</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.</p>
<img class="img-responsive col-xs-12 col-sm-4 col-md-4 col-lg-4" style="left:106%" src="images/icon6.png"></img>
<p class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="p2" style="left:139%; top:125%;" ><span><b>Reach Your Audience</b></span><br><br>Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Suspendisse fringilla fringilla.</p>-->
</div>
</div>
</section>
<section>
<div id="grey">
<div class="container">
<p class="p" style="font-size:23px; margin-top:49px; left: 15%; position:absolute;"><b>Get Notified Of Any Updates!</b></p>
<p class="p" style="color: grey; left: 15%; position:absolute; margin-top: 109px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla<br>fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum<br>mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare<br> luctus id sollicitudin ante lobortis at.</p>
<div class="notify">
<div class="input-group">
<input type="email" class="form-control" placeholder="Email Address">
<span class="input-group-btn">
<button class="btn" type="submit" id="button" style="margin-top:">Notify</button>
</span>
</input>
</div>
</div>
<div class="hidden-xs">
<iframe id="iframe" src="https://www.youtube.com/embed/mFfe4ZRQOH8" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
CSS (также половина из них)
body {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#black {
height: 48px;
background-color: #282828;
}
/*------------NAVBAR DALYKAI-------------------------*/
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
z-index
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
@media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
/*-------------------------------------------------------------------------------------------------------------------------*/
#mint {
height: 10px;
background-color: #2ecc71;
}
#background1
{
height: 600px;
background-image: url("images/background1.jpg");
background-repeat: no-repeat;
background-size:100%;
}
.p {
font-family: Myriad Pro;
}
#logo1 {
width: 10%;
margin-left: 20%;
margin-top: 11%;
}
#logo2 {
margin-top: 5%;
}
#p1 {
font-family: helvica-thin;
margin-left: 20%;
margin-top: 2%;
color: white;
font-size: 1.5vw;
}
#sicons {
position: absolute;
margin-left: 20%;
background-color: grey;
z-index: 1;
}
#sicons a:hover {
color: green;
}
#white {
height: 350px;
}
#icons {
position: absolute;
width: 35%;
}
Можете ли вы поделиться скрипку или plunker, чтобы помочь вам. –
Чтобы помочь, нам нужно создать рабочую ** минимальную ** демонстрационную версию, такую как [jsFiddle] (http://jsfiddle.net) - аналогично вашим основным снимкам экрана. Вы должны сделать эту часть и предоставить ссылку. В конце концов, мы предоставляем ответ. – gibberish