название базового принципа

[Rootpassword]

Как правильно называется принцип, согласно которому-пример 1 привожу.
В первом примере - у нас див растянулся на 100%, хоть и не прижался к окончанию контента(что логично, ибо контент в теории занимает больше 100% по ширине, но и нелогично, ибо не занимает минимальное возможное пространство) и переносится.
Второй случай-обычное прижатие.

<style>
.test_7{
border: 2px solid #D10000; 
float:left;
}

.test_7 div {
float:left;
}

</style>

<div class='test_7'>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
</div>

<style>
.test_7{
border: 2px solid #D10000; 
float:left;
}

.test_7 div {
float:left;
}

</style>

<div class='test_7'>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>

</div>

[ksa]

Rootpassword, много где встречал такое предупреждение

Нужно ли задавать ширину элементам со свойством float?

Да, ширину следует задавать всегда (кроме тех случаев, когда float применяется напрямую к картинке с неизвестной шириной).

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

http://www.codeharmony.ru/materials/47

[Rootpassword]

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

[ksa]

должен сократиться

Ну видать кому должен таки всё простил... Используй табличку, если уже так припёрло.
Она растянется под контент.

[Rootpassword]

Так использовал бы, если бы размеры элементов были заданы.
float:left всегда помогал, а тут никак.

[ksa]

Rootpassword, таблица сама растянется под контент. Ей размеры указывать не нужно...

<table border='1'>
	<td>Test</td>
</table>
<table border='1'>
	<td>Long test</td>
</table>

[Rootpassword]

Да нет же. Обтекается-то он неверно, в какой тип его не засунь. По идее, граница таблицы должна пройти по краю того, что последним встало в строчку перед переносом. И неважно, это таблица, слой, текст или что-то еще, заданное явно или через display. Вот как в данном случае поджать границу к картинкам-я не знаю.

<table border='1'>
<td><img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>
<img src=https://www.google.com/images/nav_logo99.png width=200 height=12>

</td>
</table>

[ksa]

Вот как в данном случае поджать границу к картинкам-я не знаю.

Даааа... У меня тоже что-то не получается.

[Seva1986]

Как правильно называется принцип, согласно которому-пример 1 привожу.

В спецификации написано так.
http://specs.operafan.net/css2.1RU/C...isudet.html#q8

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

[Seva1986]

может так подойдёт?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title> 111 </title>
<link rel="stylesheet" type="text/css" href="Rock&metal - glavnaja.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.test_7{
border: 2px solid #D10000; 
display:inline-block;
text-align:justify;
}
.test_7:after{
content:"";
display:inline-block;
width:100%;
}

.test_7 div {
display:inline-block;
}

</style>
</head>
<body>


<div class='test_7'>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
<div><img src=https://www.google.com/images/nav_logo99.png width=200 height=12></div>
</div>

</body>
</html>