<div class="container">
<div class="block">.block1</div>
<div class="abz1">Как и позиционирование, float используется для того, чтобы двигать боксы.</div>
<div class="block">.block2</div>
<p>Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float — это сдвинуть элемент к одной из сторон потока, правой или левой.</p>
</div>
css
body{
font-family:‘PT Sans’, sans-serif;
}
.container{
width:400px;
padding:10px;
margin:20px auto;
box-shadow:0 0 2px #ccc;
}
.block{
// float:left; /*если поиграться с этими комментариями понятнее стает) */
width:80px;
padding:10px;
background:#3498db;
color:white;
border:2px solid #34495e;
}
p{ background:#ecf0f1;
border:2px dotted #bdc3c7;
}
//.abz1{margin-top: 15px; /*если поиграться с этими комментариями понятнее стает) */
margin-bottom: 15px;
background:#ecf0f1;
border:2px dotted #bdc3c7;
}
Некое подобие абзаца с помощью CSS из первого “абзаца”, если ставить и снимать //-комментарии вроде стало ясно. Если комментарии сняты.В верхнем случае container.padding-top+ abz1.margin-top=25px у текста и просто 10пх у “блока1” . Внизу суммировать не надо тк это два элемента друг над другом то отступы между блоком2 и abz1 ,абзацем2 и abz1 совпадают и равны максимальному отступу 15пх. Если комментарии поставить, случай когда верхний текст не абзац а просто текст, отступы посчитать тоже не сложно. Не знаю на сколько понятно смог расписать
Вот эта тема: 2 задание! 100% совпадение, код компактный, но есть расхождение с подсказками.
Человек делал таблицу и объединил не три, а четыре ячейки в одну. Вопрос: почему общая ширина объединенной ячейки из трех и следующей с медалью не равна просто объединенной из четырех, когда медаль в объединенную входит?
Не знаю, насколько понятно написала. Тему почитаете, поймете, что имеется в виду.
Ответа нет. Может вы что-то сообразите по этому поводу.
я попробовал щас объединять колонки в шапке таблицы что четыре что 3 . последние 3 медали стоят как влитые . Но я вижу что изначально у человека похоже другой текст был выложен в вопросе потому что вы дали ему совет
Ваш код отлично работает без этого фрагмента:
td:nth-child(4) {
padding: 10px;
padding-right: 33px;
padding-left: 20px;
}
А у него даже нет этого кода в вопросе в css
Нет. В том и смысл, что остальной код не меняется. У всех ячеек одинаковые отступы кроме столбца с флагами.
Посмотрите на размер объединенной ячейки из четырех:
Общая ширина казалось бы тех же четырех ячеек получается 262px.
Так вот, почему объединенная из четырех ячейка худеет на 13px, что приходится увеличивать отступ у четвертого столбца до 33 (20+13)?
она ее делает нужной нам ширины ну за счет заданных падингов в цсс
td, th {
padding: 10px;
padding-right: 20px;
padding-left: 20px;
}
Когда же парень эту медальку сует в свой вариант
Колонка объединенная и так широкая и соответственно колонка с цифрами за золото не увеличилась до нужных нам размеров (за счет того что мы в шапке в нее не впихиваем картинку золотой медали) и в итоге в этом случае нам эту колонку приходится в цсс ручками увеличить
td:nth-child(4) {
padding-right: 33px;
}
до нужной нам ширины.
Третий раз уж правлю переписываю все думаю криво написано )))если не совсем доходчиво можно
//border-collapse: collapse; закоментить что бы видеть как меняются столбцы в этих двух случаях. и удалять изображение золотой медали из шапки . Если останутся вопросы или возражения буду рад посодействовать.
Вы хорошо всё написали. И с вашей помощью я уловила главную мысль - ширина содержимого четвертого столбца (цифры) - 9px, а самой медали - 22px. Здесь и получается эта разница в 13px.
Спасибо) Спустя месяц вопрос наконец решен. Жаль, что автора темы нет на форуме с 16 марта.
