Загрузочное обертывание вокруг изображения [дубликат]
Я знаю, что это очень старый вопрос, но для людей, которые ищут этот поток, теперь вы можете добавить пользовательскую анимацию к свойству блока.
@keyframes showNav {
from {opacity: 0;}
to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
display: block;
animation: showNav 250ms ease-in-out both;
}
В этой демонстрации подменю изменяется с display:none на display:block и все еще удается исчезнуть.
4 ответа
При использовании 2 столбцов текст никогда не будет обернут вокруг изображения.
Вы должны поместить изображение и текст в один столбец и полностью заполнить его. Затем заверните текст и изображение в div и поместите их влево. Что-то в строке этого (код является примером и не проверен):
<div class="col-md-12">
<div class="pull-left"><img src="YourImage.png"/></div>
<div class="pull-left">Your text goes here......</div>
</div>
Возможно, вам понадобится некоторый запас на изображении, чтобы текст не прилипал к изображению
-
1– jheul 13 October 2015 в 01:21
У меня есть 2 столбца на этой странице, каждый с текстовым изображением, заголовком, субтитрами, текстом и ссылкой. Я помещаю изображение в свой столбец в текстовом столбце, чтобы обернуть текст. Этот код преобразуется в полную ширину столбца при отображении на мобильном телефоне. Я уверен, что вы можете потянуть, если хотите, но это работает для меня. См. Код в действии в http://www.lbch.org/_Employment.html .
<div class="container">
<div class="row">
<div class="col-xs-12">Page Head Title & Text</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-5">
<img src="image" class="img-responsive" alt=""/> <br>
</div>
<div class="text-left">
<h4 class="text-center">
<strong>Article Title</strong><br>
<small>Article sub-title</small>
</h4>
<p>Text</p>
<p><a href="link">link text</a><strong> </p>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-5">
<img src="image" class="img-responsive" alt=""/> <br>
</div>
<div class="text-left">
<h4 class="text-center">
<strong>Article Title</strong><br>
<small>Article sub-title</small>
</h4>
<p>Text</p>
<p><a href="link">link text</a><strong> </p>
</div>
</div>
</div> <!--row-->
</div> <!--container-->
-
1– Janelle Bowman 12 January 2018 в 18:38
Это работает для меня.
<div class="col-md-12">
<img src="img/image.jpg" class="pull-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae aliquam optio mollitia, unde quas eaque voluptatem dignissimos eos maiores magni reprehenderit nisi, corrupti nemo hic id cum quasi officiis!</p>
</div>
Но если вы хотите, чтобы ваш текст и изображение бок о бок, то это вам поможет.
<div class="row">
<p class="col-md-8">Text goes here....</p>
<img class="img-circle col-md-4" src="image goes here..." alt="image text">
</div>