Заполнение внутри плавающего элемента div | Нужна помощь

Неведомый

Я сейчас создаю базовый, простой, старый макет div.

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

Я часами искал в Интернете и находил «очевидные» решения, но когда я пытался их реализовать, они не работали.

У меня сейчас мигрень.

Если у кого-то есть решение, я был бы рад узнать, что это такое.

Примечание. Шаблон сам по себе не является полным. Я просто пытаюсь правильно понять базовый макет/функциональность.

 


<!DOCTYPE html>


<html xmlns="[URL='https://lumtu.com/yti/b0hh0bWxodHRwOi8vdzMub3JnLzE5OTkveGvkT']http://www.w3.org/1999/xhtml[/URL]">


<head>


<meta charset="utf-8" />


<title></title>


<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0" />


<link href="style.css" type="text/css" rel="stylesheet" />


</head>


<body>


<div class="wrap">


<div class="head">


<div class="logo">


LOGO


</div>


<div class="head-right">


head right


</div>


</div>


<div class="topmenu">


<ul>


<li>


<a href="#">Home</a>


</li>


<li>


<a href="#">About</a>


</li>


<li>


<a href="#">Contact</a>


</li>


<li>


<a href="#">Blog</a>


</li>


</ul>


</div>


<div class="content-wrap">


<div class="content content-box">


<h1>This Is A Page Heading</h1>


<p>This is some content.</p>


</div>


<div class="sidemenu sidemenu-box">


sidemenu


</div>


<div class="content-2 content-2-box">


Content 2


</div>


</div>


<div class="foot">


<div class="content content-box">


<p>Foot Left</p>


</div>


<div class="sidemenu sidemenu-box">


Foot Right


</div>


</div>


</div>


</body>


</html>

Код (CSS):

 html { height: 100%; font-size: 1.8vw; } body { height: 100%; background-color: #EEEEEE; font-family: arial; } .wrap { width: 80%; height: 100%; background-color: #FFFFFF; max-width: 1200px; margin: 0px auto 0px auto; border-left: 1px solid #999999; border-right: 1px solid #999999; } .head { margin-top: 10px; } .logo { background-color: #FFFFFF; float: left; width: 30%; height: 100px; line-height: 100px; text-align: center; } .head-right { background-color: #FFFFFF; float: right; width: 70%; text-align: center; height: 100px; line-height: 100px; } .topmenu { clear: both; background-color: #FFFFFF; } .content-wrap { background-color: yellow; } .content { background-color: #CCCCCC; float: left; width: 70%; } .content-box { } .content-2 { clear: both; border-top: 1px solid #999999; background-color: #FFFFFF; } .content-2-box { padding: 1vw; } .sidemenu { background-color: #999999; float: right; width: 30%; } .sidemenu-box { } .foot { clear: both; background-color: #FFFFFF; margin-top: 10px; } /* Top Menu */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: green; text-align: center; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } .home-link { padding-left: 20%; } /* Responsive */ @media screen and (max-width: 600px) { html { font-size: 2.5vw; } .logo { float: none; width: 100%; text-align: center; } .head-right { float: none; width: 100%; } .content { float: none; width: 100%; } .sidemenu { float: none; width: 100%; } }

HTML:

Игорь Шахов

ух ты, 75 просмотров, нет ответа В любом случае, все хорошо.

Я понял. Если вы разместите элемент div, а затем добавите отступы, это дополнение приведет к тому, что элемент div станет слишком большим. Но если вы добавите приведенный ниже код, он не будет

 .content {

background-color: #CCCCCC;

float: left;

width: 70%;

padding: 20px;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;
}

Код (CSS): т.е.: так в моем коде выше:

 .content { background-color: #CCCCCC; float: left; width: 70%; }

Код (CSS): становится:

 box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;

Код (CSS): Все исправлено!

kendigell

Хм... печенье? Или, по крайней мере, Bullcookies, если вы не установили box-sizing

order-box;, поскольку без этого отступы добавляются К ширине, а не внутри нее. Это идиотская чушь — объявлять ширину ВСЕГО, особенно когда речь идет о числах с плавающей запятой.

Точно так же, как идиотизм процентных сеток.

ЕСЛИ вы просто сделаете свой контент или «большую» область плавной, чтобы вместить лишнее, вы можете перестать бросаться во все подряд этими дерьмовыми значениями! Пиксельные метрики, процентная ширина, мин-макс для дочерних элементов вместо родительского контейнера.

все это эпично /FAIL/ в самых базовых аспектах CSS.

Sveta_Levshova

@смертельная тень

У меня монитор с разрешением 1280x720.

В приведенном ниже коде я использовал фиксированную ширину для элемента div (1280 пикселей) и отступ в 400 пикселей для того же элемента div.

Теперь, если к ширине добавить отступы, то общая ширина этого div должна стать на 400 пикселей больше, чем общее разрешение экрана моего ноутбука, равное 1280 пикселей, что заставит меня прокручивать страницу вправо и влево.

Но этого не происходит.

DIV отображается шириной 1280 пикселей с внутренними отступами по 400 пикселей со всех сторон.

Вот HTML:

(Дайте мне знать, что я пропустил)

 


<html><body style=" margin: 0px; padding: 0px; background: #000000; color: #FFFFFF; ">


<div style=" width: 1280px; margin: 0px; padding: 400px; border: #FFFFFF 10px solid; ">


<p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text


<p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text


<p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text


</div>


</body></html>

Код (разметка): Отступы никак не влияют на ширину.

Brain_Killer

Еще одна часть вашей проблемы — переосмысление макета, использование ширины во всем.

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

Таким образом, он автоматически заполнит доступное пространство.

Мне также не нравятся столбцы % ширины, поскольку меньшие столбцы либо оказываются уродливой пустой ерундой при высоких разрешениях, либо оказываются слишком маленькими при низких разрешениях.

Эластичная (измеренная по em) колонка рядом с гибкой обычно выглядит и ведет себя лучше для пользователей.

Хотя в наши дни вам, вероятно, следует использовать flex, по крайней мере, для некоторых из этих целей, освободитесь от бессмысленного DIV, поскольку у вас его примерно в два раза больше, если не больше, чем необходимо, и вам следует посмотреть, как у вас есть DIV, выполняющий работу H1. и H1 выполняет работу H2.

Вам, вероятно, также следует использовать EM или REM вместо PX, чтобы вы не говорили пользователям с доступностью, что им самим нужно пойти на хуй.

Помните: если вы думаете в ПХ, кто-то не думает.

Кроме того, поскольку вы используете тип документа HTML 5, вы также можете указать хреновому пространству имен XML, чтобы он тоже пошел в поход, мы больше не говорим type="" в таблице стилей LINK или SCRIPT, и вы не смогли указать цель мультимедиа в указанной таблице стилей.

СВЯЗЬ. Помните: если вы видите без media="" или с установленным значением media="all", когда таблица стилей предназначена для макета экрана, вы смотрите на невежество, некомпетентность и/или некомпетентность.

Неважно, сколько дерьма.

Фанаты фреймворка говорят: «Медиа-атрибут, что это?!?»

Евгений_веб

Заполнение внутри DIV не влияет на то, как ваш div перемещается или сколько места он занимает.

какая-то ссылка
еще одна ссылка

Некоторый контент здесь

Некоторый контент здесь

Некоторый контент здесь

Некоторый контент здесь

Первый элемент div будет плавать вправо, занимать 25% ширины экрана, минимум 400 пикселей и максимум 700 пикселей.

Второй плавает влево, занимает 70% ширины, тот же минимум/макс.

Заполнение не имеет значения.

Вы можете увеличить или уменьшить отступы, указанные выше размеры останутся прежними. Ваша проблема может заключаться в том, что вы используете размеры ширины 30% и 70%, не оставляя места для «внешних полей». Немного уменьшите одно из этих значений.

Например, размеры ширины 25% и 70%. Также выполните «clear: Both;» в вашей обертке контента Это отделит раздел контента от раздела заголовка.

Skaden

Глупый вопрос, а вы все еще пользуетесь давно несуществующим IE? Отсутствие типа документа переведет вас в «режим причуд», который имеет те же правила, что и установка box-sizing

order-box; В FF и Chrome это дает мне ширину 2100 пикселей.

1280 + 400 отступов слева + 400 отступов справа + левая граница 10 пикселей + правая граница 10 пикселей Мне пришлось бы добавить box-sizing

order-box; чтобы этот внутренний div оставался внутри 1280.

Похожие темы	Дата
Обложка для CD! Help me	19.10.2024, 18:10
Ширина макета (сайта). На что ориентироваться?	19.10.2024, 18:10
Как сделать логотип с текстом на сайте?	19.10.2024, 18:10
как создать анимацию Анимация смены слоев в виде часовой стрелки в фотошопе?	19.10.2024, 18:10
Пожалуйста, кто-нибудь, что это за код (зашифрованный или что)	19.10.2024, 18:10
Какая CMS мне подойдет?	19.10.2024, 18:10
Cometchat — ужасное мошенническое программное обеспечение	19.10.2024, 18:10
Хотите знать, возможно ли создать сайт, на котором посетители смогут загружать изображения и писать текст?	19.10.2024, 18:10
Неправильная ширина индикатора выполнения	19.10.2024, 18:10
Создайте блог, чтобы получить прибыль. Создайте блог, чтобы получить прибыль.	19.10.2024, 18:10

Заполнение внутри плавающего элемента div | Нужна помощь

Неведомый

Игорь Шахов

kendigell

Sveta_Levshova

Brain_Killer

Евгений_веб

Skaden

I AM

Интересно