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

Leave a Comment / Css / By /

html — div элементы в одну строку

Вопрос задан

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

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

Как расположить div элементы в одну строку?

.div1 { display: inline; }
<div>
       <img .... >
    </div>
    <div>
       <img .... >
    </div>
    <div>
       <img .... >
    </div>

Картинки выстраиваются в ряд. Но как быть, если например, под картиной нужно сделать описание?

.div1 { display: inline; }
<div>
   <img .... >
   <div> image1 </div>
</div>
<div>
   <img .... >
   <div> image2 </div>
</div>
<div>
   <img .... >
   <div> image3 </div>
</div>

То элементы div1 снова начинаются с новой строки. как быть?

  • html
  • css

2

Просто

.div1 {display:inline-block;}

А вот так можно уменьшить количество кода:

.about {
 display:inline-block;
}
.about img {
 display:block;
}
<div>
   <div>
   <img src="pic.png">
   image1
   </div>
   <div>
   <img src="pic.png">
   image2
   </div>
   <div>
   <img src="pic.png">
   image3
   </div>
</div>

0

Я советую использовать flex, вот пример кода:

HTML file:

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS file:

.container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: 5px solid black;
    padding: 20px;
}
#con1{
    width: 150px;
    border: 2px solid black;
    background-color: green;
    height: 150px;
    border-right: 0px;
}
#con2{
    width: 100%;
    border: 2px solid black;
    background-color: yellow;
    height: 300px;
}
#con3{
    width: 150px;
    border: 2px solid black;
    border-left: 0px;
    background-color: green;
    height: 150px;
}

Советую почитать

Используй display: inline-block или float: left на селектор . div1 Подробнее про выравнивание элементов.

1

Все дело в том, что внутри — блочный элемент. Попробуйте так:

<span>
    <div>123</div>
</span>
<span>
    <div>123</div>
</span>
<span>
    <div>123</div>
</span>

SPAN — inline элемент, но DIV — блочный. Результат — все в столбик.

Уберите везде DIV — получите результат в строку.

Для того, чтобы получить то, что хотите — можно указать не display: inline, а display: inline-block, либо делать через таблицы (не в тегах, а в стилях — например, display: table)

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

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

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

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

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

Почта

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

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

Почта

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

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

CSS: элементы в строку | web-sprints

11 Июн 2016

Главная  »  Верстка   »   CSS: элементы в строку

Опубликовано в Верстка admin Июнь 11, 2016

По умолчанию все блочные элементы в HTML выстраиваются в ряд друг под другом и занимают всю ширину страницы. И тут же у новичков возникает вопрос как расположить, с помощью CSS элементы в строку. Существует 2 наиболее популярных способа это сделать.

  1. Использовать display: inline-block
  2. Использовать float: left/right

Рассмотрим каждый из них.

CSS свойство display: inline-block

Данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. Важно понимать как работает это свойство, поэтому давайте рассмотрим на практике. Сделаем 3 блока внутри родительского и расположим их в одну линию. Вот что у меня получилось:

HTML разметка выглядит следующим образом:

<div> <div> </div> <div> </div> <div> </div> </div>

1

2

3

4

5

6

7

8

9

10

11

<div>

<div>

</div>

<div>

</div>

<div>

</div>

</div>

CSS стили:

. parent { border: 1px solid black; height: 200px; } .child { height: 100px; display: inline-block; background: red; width: 30%; }

1

2

3

4

5

6

7

8

9

10

11

12

.parent

{

border: 1px solid black;

height: 200px;

}

.child

{

height: 100px;

display: inline-block;

background: red;

width: 30%;

}

Как видно на изображении я добавил свойства background и border, чтоб наглядно видеть происходящее на странице. Обязательно задаем всем элементам height иначе оно будет равно 0 по умолчанию и мы ни чего не увидим. Трем блокам .child задаем display: inline-block и width: 30%. ВНИМАНИЕ! Если не установить свойство width, блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку.  Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством. Если попробуем изменить класс для блока .child находящегося по середине, тем самым убрав все стили, то увидим что все элементы выстроились в ряд.

CSS свойство float: left или float: right

Аналогичное по результату inline-block, но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Давайте попробуем убрать из предыдущего примера

display: inline-block;

display: inline-block;

и добавим вместо него

float: left;

float: left;

Результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним.

 Но это сработает только с заполненными элементами типа <p> с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-left .

Как заставить содержимое div оставаться на одной строке с помощью HTML и CSS?

У меня есть длинный текст внутри div с определенной шириной :

HTML:

 
Переполнение стека - ЛУЧШИЙ!!!

CSS:

 раздел {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
}

Как сделать так, чтобы строка оставалась на одной строке (т. е. обрезалась в середине «Переполнения»)?

Я пытался использовать переполнение : скрыто , но это не помогло.

  • HTML
  • CSS

1

Попробуйте это:

 дел {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
    переполнение: скрыто;
    пробел: nowrap;
}

0

Использовать пробел:nowrap и переполнение:скрыто

http://jsfiddle. net/NXchy/8/

2

В разделе CSS используйте пробел : nowrap; .

 раздел {
    ширина: 100 пикселей;
    пробел: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
} 
 
Переполнение стека — ЛУЧШЕЕ!!!

Я сделал скрипку:

http://jsfiddle.net/audetwebdesign/kh5aR/

RobAgar указал white-space:nowrap .

Пара моментов: Вам нужно overflow: hidden , если вы не хотите, чтобы лишние символы торчали в макете.

Кроме того, как уже упоминалось, вы можете использовать пробел : pre (см. EnderMB), имея в виду, что pre не свернет пробел, а пробел: nowrap .

 раздел {
    дисплей: гибкий;
    flex-направление: строка;
}

было решением, которое сработало для меня. В некоторых случаях со списками div это необходимо.

Некоторые альтернативные значения направления: row-reverse , column , column-reverse , сбросить , начальный и наследовать . Которые делают то, что вы от них ожидаете.

Добавьте это в свой div:

 white-space: nowrap;

http://jsfiddle.net/NXchy/1/

1

Попробуйте. Он использует pre , а не nowrap , поскольку я предполагаю, что вы хотите, чтобы это работало аналогично 

  , но любой из них будет работать нормально: 
 
 раздел {
    граница: 1px сплошной черный;
    максимальная ширина: 70 пикселей;
    пробел: предварительно;
}
 
 http://jsfiddle.net/NXchy/11/
 Ни один из предыдущих ответов не помог мне.
 Существуют случаи, когда независимо от того, что вы делаете, и в зависимости от системы (Oracle Designer: Oracle 11g - PL/SQL),  div  всегда будут переходить на следующую строку, и в этом случае вы должны использовать тег  span  вместо.
 Это сотворило со мной чудеса.
 <промежуток поплавка: левый; пробел: nowrap; переполнение: скрыто;>
    

Просто ваш текст ||
<промежуток поплавка: слева; пробел: nowrap; переполнение: скрыто;>
 
 1
 в диапазоне вам нужно добавить:  { дисплей: блок; } 
 интервал {
  ширина: 70 пикселей;
  граница: 1px сплошной черный;
  дисплей: блок;
  переполнение: скрыто;
  пробел: nowrap;
  переполнение текста: многоточие;
  } 
 Переполнение стека — ЛУЧШЕЕ!!! 
 Попробуйте установить высоту, чтобы блок не мог увеличиваться для размещения вашего текста, и оставьте параметр  overflow: hidden .
 Вот пример того, что вам может понадобиться, если вам нужно отобразить две строки высотой:
 div {
    граница: 1px сплошной черный;
    ширина: 70 пикселей;
    высота: 2,2 см;
    переполнение: скрыто;
}
 
 4
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 Опубликовать как гость 
 Электронная почта
 Обязательно, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 css - хранить все в одной строке в div 
 Задавать вопрос
 спросил 
 Изменено
 10 лет, 8 месяцев назад
 Просмотрено
 15 тысяч раз
 поэтому моя проблема такова:
 У меня есть div, а в div есть img, а затем строка рядом с изображением, высота 25, ширина 128, выравнивание по центру.
 — это просто имя пользователя и маленький значок рядом с его именем. он отлично работает до тех пор, пока у пользователя не будет действительно длинного имени, и в этом случае он поместит строку в новую строку, что определенно не то, что мне нужно.
 Я бы хотел, чтобы оно просто переливалось и скрывало остальную часть имени, если оно слишком длинное. в любом случае я могу это сделать?
 У меня было скрыто переполнение, а также максимальная высота и максимальная ширина. Я пытался использовать диапазон, а также отображение: встроенный, но он продолжает подталкивать его к новой строке. Мне нужно держать выравнивание по центру.
 любая помощь?
 не могу найти никакой информации. Я тоже пытался положить его в таблицу, но безрезультатно.
 вот код:
 
    <выравнивание таблицы="центр">
        
            
                

                     png"){?>
                             
                        
                             
                        
                

            
        
    

 
 Добро пожаловать в сообщество!
  •  Пожалуйста, постарайтесь не размещать стену текста, так как это затрудняет чтение вашего вопроса.
  •  Предварительный просмотр того, что вы вводите, находится под текстовым полем «Задать вопрос».
  •  Спасибо за предоставленный код!
 Попробуйте  white-space: nowrap; , так как это, вероятно, решит вашу проблему.
 Кроме того,  никогда не используйте таблицы для нетабличных данных  . Сейчас уже не 1995 год, CSS может делать все, что может таблица.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *