#html #css #css-float #margin #display
Вопрос:
У меня есть сценарий в AEM, который находится на уровне контейнера, по умолчанию в AEM есть CSS float: left , который нельзя удалить, так как будет затронут весь поток, но в том же div мне нужно достичь максимальной ширины:1280 пикселей с выравниванием по центру. Следующий код, в котором контейнер класса не может быть удален, и я должен добавить дополнительный класс для его достижения. Код, который я пробовал до сих пор. Примечание: Я не могу удалить свойство float, так как оно является основным компонентом. Любая помощь будет оценена по достоинству !!
.custom-container{ border: 1px solid red; max-width: 1280px; margin-left: auto; margin-right:auto; display: inline-block; } .container{ float: left; clear: none; width: 100%; box-sizing: border-box; } lt;div class="container custom-container"gt; lt;div class="sub-value"gt; lt;pgt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/pgt; lt;pgt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/pgt; lt;/divgt; lt;/divgt; Ответ №1:
Я не знаю, что вам разрешено изменять, а что нет, но это может сработать:
lt;htmlgt; lt;headgt; lt;scriptgt; function changeWidth(newWidth) { document.getElementById("test").style.width = newWidth; } lt;/scriptgt; lt;style media="all"gt; .custom-container { max-width: 100%; /* made it 100% */ margin-left: auto; margin-right: auto; display: inline-block; } .container { float: left; clear: none; width: 100%; box-sizing: border-box; } .sub-value { border: 1px solid red; max-width: 1280px; /* restricted */ margin: 0 auto; /* centering */ } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="container custom-container"gt; lt;div class="sub-value"gt; lt;p gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/p gt; lt;p gt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/p gt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Ответ №2:
Используйте некоторую математику, чтобы рассчитать маржу вручную
.custom-container { border: 1px solid red; max-width: 1280px; margin: 0 max(0px, (100% - 1280px)/2); display: inline-block; } .container { float: left; clear: none; width: 100%; box-sizing: border-box; } lt;div class="container custom-container"gt; lt;div class="sub-value"gt; lt;pgt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/pgt; lt;pgt;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.lt;/pgt; lt;/divgt; lt;/divgt; Комментарии:
1. Синтаксическая ошибка
2. @ScriptHost это по центру?
3. нет, когда я подаю
margin: 0 max(0px, (100% - 1280px)/2)заявку ;он показывает Недопустимое значение свойства4. @ScriptHost запустите фрагмент здесь во всю ширину. является ли она центрированной?
Ответ №3:
Вы можете попробовать следующий код css следующим образом:
.custom-container { border: 1px solid red; max-width: 1280px; margin-left: auto; margin-right: auto; display: block; float: none !important; } Комментарии:
1. Я не могу удалить свойство float, так как оно является основным компонентом.
2. является ли класс «пользовательский контейнер» только для div? или он используется и во всех других div?
3. если класс «пользовательский контейнер» используется только для div spacific, вы можете переопределить свойство float.
4. он используется во всех местах.
5. Можете ли вы использовать другой дополнительный класс только для div, тогда вы сможете переопределить свойство float. Как правило, мы не должны использовать какое-либо свойство flot с контейнером div. В любом случае, вы также можете сделать контейнер полной ширины, а затем использовать касс «подценность» в качестве контейнера, чтобы разместить внутреннее содержимое в центральном положении
Ответ №4:
Просто скопируйте и вставьте
.custom-container{ border: 1px solid red; max-width: 1280px; margin: auto; tex-align: center; }