название базового принципа
Как правильно называется принцип, согласно которому-пример 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>
|
Rootpassword, много где встречал такое предупреждение
Цитата:
|
да, именно. Но тут как раз я не могу задать размер, и не могу заставить "плавающий элемент с незаданной шириной должен сократиться до размеров самого широкого элемента, который в нем содержится".
Причем все 5 браузеров ведут себя на редкость единодушно в этом вопросе. |
Цитата:
Она растянется под контент. |
Так использовал бы, если бы размеры элементов были заданы.
float:left всегда помогал, а тут никак. |
Rootpassword, таблица сама растянется под контент. Ей размеры указывать не нужно...
<table border='1'> <td>Test</td> </table> <table border='1'> <td>Long test</td> </table> |
Да нет же. Обтекается-то он неверно, в какой тип его не засунь. По идее, граница таблицы должна пройти по краю того, что последним встало в строчку перед переносом. И неважно, это таблица, слой, текст или что-то еще, заданное явно или через 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> |
Цитата:
|
Цитата:
http://specs.operafan.net/css2.1RU/C...isudet.html#q8 я это всегда понимал так, если внутренние блоки не помещаются в линию, то пытаться дать максимально возможную ширину пока не влезут (поэтому и есть лишнее место, как бы попытка растянуться чтобы поместилось), если помещаются то сделать минимально возможную ширину. |
может так подойдёт?
<!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>
|
| Часовой пояс GMT +3, время: 16:13. |