Выравнивание текста и изображения в рамке необходимо настроить текст автоматически ниже изображения после того, как изображение закончилось? - PullRequest
Новая
       3

Выравнивание текста и изображения в рамке необходимо настроить текст автоматически ниже изображения после того, как изображение закончилось?

0 голосов
/ 21 мая 2019

я работаю с начальной загрузкой? строка разделена на col-sm-6 и та же другая часть изображения теперь имеет высоту 720px, но текст имеет большую высоту, чем изображение, не хочу выравнивать остальную часть текста под изображением или по ширине рамки ??

assets / images / posts / "style =" height: 100%; ширина: 100%; подгонка объекта: содержать; border-radius: 20px; ">

1 Ответ

0 голосов
/ 21 мая 2019

Если вы просто хотите, чтобы текст был обернут вокруг изображения, вам просто нужно Bootstrap class = "pull-left" на изображениях. Здесь я привожу пример этого, надеюсь, это поможет вам. 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Wrapping Image with Text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        .row {
            margin-top: 30px;
        }
        .pull-left {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/people" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p> 
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/nature" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/arch" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
        </div>
    </div>

    <!--latest jQuery 3-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!--Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...