Html div в одну строку: html — Расположение нескольких div-ов в одну строку

Leave a Comment / Html / By /

html — Расположение нескольких div-ов в одну строку

Вопрос задан

Изменён 4 года 4 месяца назад

Просмотрен 234k раз

Подскажите, пожалуйста, как можно расположить несколько div-ов в одну строку таким образом, чтобы даже в том случае, если их общая ширина превышала ширину контейнера, они всё равно не переносились на новую строку, а просто происходила обрезка не помещающихся div-ов.

  • html
  • css

Есть много вариантов, в зависимости от того, как нужно отображать сами блоки. Один с вариантов:

.container{overflow:hidden;width:200px}
.box{white-space:nowrap}
.box div{width:90px;display:inline-block;border:1px solid black}
<div>
  <div>
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
  </div>
</div>

Пример

0

.

<div>
    <div>
        <div>content</div>
        <div>content</div>
        <div>content++</div>
    </div>
</div>
1

На мой взгляд, самое нормальное решение:

<div>
    <div>
        <div>content</div>
        <div>content</div>
        <div>content++</div>
    </div>
</div>

Я использовал у себя эту часть:

<div>
<div>content</div>
<div>content</div>
<div>content++</div>
</div>

и все заработало.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как расположить несколько div в одну строку

Задать вопрос

Вопрос задан

2 года 1 месяц назад

Изменён 2 года 1 месяц назад

Просмотрен 120 раз

Надо расположить несколько div’ов в одну строку. Пробовал: display:inline-block; float:left;. Увы, ничего не помогло. Вот код:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main>
        <h2 >Заголовок</h2>
        <div></div>
        <div>
            <h3>Второй заголовок</h3>
        </div>
        <div></div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.
  jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585Ach59TLBQObG" crossorigin="anonymous"></script>
</body>
</html>

Надо расположить блок красного цвета рядом с блоком фиолетового цвета. Вот какой результат я хочу получить :

  • html
  • css
  • веб-программирование
  • bootstrap
  • веб-дизайн
2

Строку с блоком нужно было вставить перед вторым заголовком.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <title>Document</title>
</head>
<body>
    <main>
        <h2 >Заголовок</h2>
        <div></div>
        <div></div>
        <div>
            <h3>Второй заголовок</h3>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585Ach59TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Как сделать, чтобы несколько div отображались в одной строке, но сохраняли ширину?

спросил

Изменено 2 года, 1 месяц назад

Просмотрено 288 тысяч раз

Обычно вы устанавливаете элементы для отображения: встроенные, если хотите, чтобы они отображались в одной строке.

Однако установка элемента на встроенный означает, что атрибут ширины будет бессмысленным.

Как разместить элементы div в одной строке, не делая их встроенными?

Вы можете использовать display:inline-block .

Это свойство позволяет элементу DOM иметь все атрибуты блочного элемента, но сохранять его встроенным. Есть некоторые недостатки, но в большинстве случаев этого достаточно. Почему это хорошо и почему это может не сработать для вас.

РЕДАКТИРОВАТЬ: Единственный современный браузер , у которого есть некоторые проблемы, это IE7. См. Quirksmode.org

7

Я использовал свойство

 display: table;

и

 дисплей: таблица-ячейка;

для достижения того же. Ссылка на скрипку ниже показывает 3 таблицы, завернутые в div, и эти div дополнительно заключены в родительский div

Вот jsfiddle: http://jsfiddle. net/vikikamath/QU6WP/1/ Я подумал, что это может быть полезно для тех, кто хочет установить div в одну строку без использования display-inline.

3

Лучше использовать Flex. Просто попробуйте…

 display: flex;
1

Вы можете использовать float:left в DIV или использовать тег , например

 
 Первый 


 Второй

или

  Первый 
 Второй

Вы можете перемещать элементы div столбца, используя float: left; и дать им ширину.

И чтобы убедиться, что ни один другой ваш контент не перепутался, вы можете обернуть плавающие элементы div внутри родительского элемента div и придать ему четкие плавающие стили.

Надеюсь, это поможет.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как ограничить длину текста одной строкой с помощью CSS

Если вы хотите ограничить длину текста одной строкой, вы можете обрезать строку, отобразить многоточие или пользовательскую строку. Все это можно сделать с помощью CSS-свойства text-overflow, которое определяет, как пользователь должен сигнализировать о переполненном содержимом.

Здесь вы найдете все три вышеупомянутых метода ограничения длины текста одной строкой.

Пример ограничения длины текста одной строкой путем обрезки строки: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        пробел: nowrap;
        переполнение: скрыто;
        переполнение текста: клип;
      }
    
 

  
  <тело>
    <дел>
      Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

Попробуй сам »

Результат

Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

Свойство пробела со значением «nowrap» и свойство переполнения со значением «скрытый» необходимо использовать со свойством text-overflow.

Пример ограничения длины текста одной строкой путем добавления многоточия: 

 

  <голова>
    Название документа
    <стиль>
      .текст {
        пробел: nowrap;
        переполнение: скрыто;
        переполнение текста: многоточие;
      }
    
  
  <тело>
    <дел>
      Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

Попробуй сам »

Значение свойства text-overflow, использованное в следующем примере, добавляет строки в конец строки только в Firefox.