Авто ширина блоков в одну строку

@borovik · Регистрация: 25.07.2010

Author24 — интернет-сервис помощи студентам

Привет. Что-то или туплю, или не все так просто.

Есть одна строка, в ней несколько блоков(картинок). Нужно чтобы они суммарно были в 100% ширины, а при сжатии и разжатии окна, они также сужались или разжимались.
Главное условие - чтобы внутренние блоки всегда были в одну строку (не переносились), float нельзя использовать.

https://jsfiddle.net/1n49ewe5/

CSS

.i{
   margin: 5px;
   padding 10px;
   background-color: red;
}
 
.row{
   margin: 5px;
   padding 10px;
   background-color: green;
}
 
img{
  width: 100%;
  height: 100px;
}

HTML5

<div class="row">
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
</div>

@Shakalaka · 25.04.2017, 21:11

Сообщение от borovik

Главное условие - чтобы внутренние блоки всегда были в одну строку (не переносились), float нельзя использовать.

CSS

.i{
   padding: 10px;
   background-color: red;
   box-sizing:border-box;
   display: inline-block;
   width: 33.3%;
}
 
.row{
   margin: 5px;
   padding: 10px;
   background-color: green;
   box-sizing:border-box;
   font-size: 0;
}
img{
  width: 100%;
  height: 100px;
  display: block;
}

https://jsfiddle.net/shakalaka/1n49ewe5/1/
А почему вдруг нельзя float использовать?

@Патрон · 25.04.2017, 21:17

CSS

1
2
3

.row{
  display: flex
}

или

CSS

.row{
   display: block
   white-space: nowrap;
   width: 100%;
}
 
.i{
  display: inline-block;
}
 
img{
   max-width: 100%;
   height: auto;

@borovik · 25.04.2017, 21:21 **[ТС]**

Сообщение от Shakalaka

А почему вдруг нельзя float использовать?

т.к. проект большой и не применяется float. Там нужно будет много переделывать "окружающей" верстки.
---------
вот то что нужно только кол-во картинок может быть произвольное!

Добавлено через 2 минуты
Товарищ "Патрон". Ваш метод совсем не то дает, блоки переносятся, не в 100% ширины
https://jsfiddle.net/1n49ewe5/2/

@Патрон · 25.04.2017, 21:27

https://jsfiddle.net/1n49ewe5/4/

HTML5

<div class="row">
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
  <div class="i"><img src="https://pbs.twimg.com/profile_images/671511019940790272/krM3K2fW.jpg"></div>
</div>

CSS

.row{
   display: flex;
}
 
img{
   max-width: 100%;
   height: auto;
  }

@Shakalaka · 25.04.2017, 21:28

Сообщение от borovik

Товарищ "Патрон". Ваш метод совсем не то дает, блоки переносятся, не в 100% ширины

Вы как-то неправильно его применили

CSS

.row{
   display: flex;
   flex-wrap:nowrap;
   width: 100%;
   
}
 
img{
   max-width: 100%;
   height: auto;
   display:block;
  }

https://jsfiddle.net/shakalaka/1n49ewe5/5/
Но я не уверен что вам подойдет флекс, если вы флоат не используете из-за "окружающей" верстки

@borovik · 25.04.2017, 21:30 **[ТС]**

Сообщение от Патрон

https://jsfiddle.net/1n49ewe5/4/

да! то что нужно!
Как-то я не туда нажал.
Вот второй вариант без flex не работает.

@Патрон · 25.04.2017, 21:34

Вот второй вариант без flex не работает.

там ; была пропущена
https://jsfiddle.net/1n49ewe5/6/

Вы как-то неправильно его применили

CSS

.row{
   display: flex;
   flex-wrap:nowrap;
   width: 100%; 
}

flex-wrap:nowrap; можно и не писать т.к. это значение по умолчанию, но для более понятия что происходит, можно и написать

@borovik · 25.04.2017, 21:36 **[ТС]**

Сообщение от Патрон

там ; была пропущена
https://jsfiddle.net/1n49ewe5/6/

див row должен быть 100% видим, как в случае flex, а он уехал за пределы экрана

Новые блоги и статьи
Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .	Как написать микросервис на Go/Golang с Kafka и GitHub CI/CD InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .	Как написать микросервис с нуля на C# с RabbitMQ, CQRS и CI/CD InfoMaster 14.01.2025 В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .	Как создать интернет-магазин на PHP и JavaScript InfoMaster 14.01.2025 В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .	Как написать Тетрис на Ассемблере InfoMaster 14.01.2025 Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .
Как создать игру "Танчики" на Unity3d и C# InfoMaster 14.01.2025 Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .	Организую платный онлайн микро-курс по доработке Android-клиента Telegram _Ivana 14.01.2025 Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .	Как создать приложение для фитнеса для iOS/iPhone на Kotlin InfoMaster 14.01.2025 Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .	Как создать приложение магазина для iOS/iPhone на Swift InfoMaster 14.01.2025 Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .	Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь! Hrethgir 13.01.2025 По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта в Gowin Eda. Восьмибитный счётчик из сумматора+ генератор сигнала. . .	UserScript для подсветки кнопок языков программирования в зависимости от текущего раздела volvo 13.01.2025 В результате работы этого скрипта подсвечиваются нужные кнопки не только в форме быстрого ответа, но и при редактировании сообщения: / / ==UserScript== / / @name CF_DefaultLangSelect / / . . .

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	25.04.2017, 21:21 [ТС]	4
	Сообщение от Shakalaka А почему вдруг нельзя float использовать? т.к. проект большой и не применяется float. Там нужно будет много переделывать "окружающей" верстки. --------- вот то что нужно только кол-во картинок может быть произвольное! Добавлено через 2 минуты Товарищ "Патрон". Ваш метод совсем не то дает, блоки переносятся, не в 100% ширины https://jsfiddle.net/1n49ewe5/2/ 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	25.04.2017, 21:30 [ТС]	7
	Сообщение от Патрон https://jsfiddle.net/1n49ewe5/4/ да! то что нужно! Как-то я не туда нажал. Вот второй вариант без flex не работает. 0

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	25.04.2017, 21:36 [ТС]	9
	Сообщение от Патрон там ; была пропущена https://jsfiddle.net/1n49ewe5/6/ див row должен быть 100% видим, как в случае flex, а он уехал за пределы экрана 0

Авто ширина блоков в одну строку

Решение