Отключить перенос блока на новую строку

145
19 марта 2019, 17:50

потихоньку пытаюсь начать разбираться в html, не понимаю как сделать так, чтобы пятый и последующие блоки (один, два) оставались в своей строке, а также при сужении страницы, а не переносились на новую. Могу скинуть не тот код css, заранее извиняюсь :)

<div class="digital">
    <div class="container">
        <div class="digital-main">
            <h3> <span></span></h3>
        </div>
        <div class="digital-top">
            <div class="col-md-3 digital-left">
                <div class="digital-one">
                    <h4></h4>
                    <label></label>
                    <p><sup></sup><sup></sup><sub></sub></p>
                    <ul>
                        <li><p><span></span> </p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                    </ul>
                    <div class="">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
                            <div class="col-md-3 digital-left">
                <div class="digital-one">
                    <h4></h4>
                    <label></label>
                    <p><sup></sup><sup></sup><sub></sub></p>
                    <ul>
                        <li><p><span></span> </p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                    </ul>
                    <div class="">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
                            <div class="col-md-3 digital-left">
                <div class="digital-one">
                    <h4></h4>
                    <label></label>
                    <p><sup></sup><sup></sup><sub></sub></p>
                    <ul>
                        <li><p><span></span> </p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                    </ul>
                    <div class="">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
                            <div class="col-md-3 digital-left">
                <div class="digital-one">
                    <h4></h4>
                    <label></label>
                    <p><sup></sup><sup></sup><sub></sub></p>
                    <ul>
                        <li><p><span></span> </p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                    </ul>
                    <div class="">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
                            <div class="col-md-3 digital-left">
                <div class="digital-one">
                    <h4></h4>
                    <label></label>
                    <p><sup></sup><sup></sup><sub></sub></p>
                    <ul>
                        <li><p><span></span> </p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                        <li><p><span></span></p></li>
                    </ul>
                    <div class="">
                        <a href="#"></a>
                    </div>
                </div>
            </div>

http://jsfiddle.net/vm4fesL8/

Answer 1

Вероятно вы используете bootstrap, тогда почитайте про Grid system, возможно вашу проблему можно решить добавив к блокам классы вроде .col-sm-12, .col-sm-6 и тд.

Возможно вам потребуются Media Queries в сочетании с :nth-child. К примеру нужно чтобы на экране <= 992px шириной второй и третий блок были 50% ширины, тогда примерно так:

@media screen and (max-width: 992px) {
  /* Все блоки делаем на 100% ширины экрана */
  .digital-top .col-md-3 {
    width:100%;  
  }
  /* Второй и третий на 50% */
  .digital-top .col-md-3:nth-child(2),
  .digital-top .col-md-3:nth-child(3) {
    width: 50%;
  } 
}
READ ALSO
Как растянуть блок на всю высоту родителя?
HTML

Как растянуть блок на всю высоту родителя?

У меня есть три блока с шириной 30% которые стоят в ряд при помощи:

 118
Как сделать чтобы текст уходил за границу div слева
HTML

Как сделать чтобы текст уходил за границу div слева

Обычное поведение текста, если он больше чем размер ограничивающего div и добавлены свойства white-space: nowrap; overflow: hidden; - текст выходит за границу...

 134
Как уменьшить общий размер слайдера
HTML

Как уменьшить общий размер слайдера

 160
Screenshot with JavaScript
HTML

Screenshot with JavaScript

У меня на сайте есть карта от 2гисИ нужно сделать скрин этого блока с картой на js, решил использовать библиотеку html2canvas и когда скрипт это делает...

 123