左右边距、边距、显示：块/内联块自动不适用于 div

Question

I have a scenario in AEM which is on container level default AEM has the CSS of float: left which cannot be removed since the entire flow will be affected, but on the same div, I need to achieve max-width:1280px with center-aligned.我在容器级别的 AEM 中有一个场景，默认 AEM 的 CSS 为float: left ，由于整个流程都会受到影响，因此无法删除它，但在同一个 div 上，我需要使用中心实现 max-width:1280px-对齐。 The following code where the class container cannot be removed and I have to add an extra class for achieving it.以下代码无法删除类容器，我必须添加一个额外的类来实现它。 The code I have tried so far.到目前为止我尝试过的代码。 Note: I cannot remove float property since its core component.注意：我无法删除 float 属性，因为它的核心组件。 Any help will be appreciated !!任何帮助将不胜感激！！

 .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; }

 <div class="container custom-container"> <div class="sub-value"> <p>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.</p> <p>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.</p> </div> </div>

Answer 1

I don't know what you are allowed to change and what not but this may work:我不知道你可以改变什么，不能改变什么，但这可能有效：

 <html> <head> <script> function changeWidth(newWidth) { document.getElementById("test").style.width = newWidth; } </script> <style media="all"> .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 */ } </style> </head> <body> <div class="container custom-container"> <div class="sub-value"> <p >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.</p > <p >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.</p > </div> </div> </body> </html>

Answer 2

Use some math to calculate the margin manually使用一些数学方法手动计算边距

 .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; }

 <div class="container custom-container"> <div class="sub-value"> <p>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.</p> <p>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.</p> </div> </div>

Answer 3

You can try the following code of css as follows:你可以试试下面的css代码如下：

.custom-container {
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
float: none !important;
}

Answer 4

Just copy paste .custom-container{ border: 1px solid red;只需复制粘贴 .custom-container{ border: 1px solid red; max-width: 1280px;最大宽度：1280px； margin: auto;保证金：自动； tex-align: center; tex-align：居中； } }

左右边距、边距、显示：块/内联块自动不适用于 div

问题描述

4 个解决方案

解决方案1
1 2021-11-03 08:30:06

解决方案2
1 2021-11-03 08:57:05

解决方案3
0 2021-11-03 06:01:59

解决方案4
-1 2021-11-03 08:18:05

左右边距、边距、显示：块/内联块自动不适用于 div

问题描述

4 个解决方案

解决方案1 1 2021-11-03 08:30:06

解决方案2 1 2021-11-03 08:57:05

解决方案3 0 2021-11-03 06:01:59

解决方案4 -1 2021-11-03 08:18:05

解决方案1
1 2021-11-03 08:30:06

解决方案2
1 2021-11-03 08:57:05

解决方案3
0 2021-11-03 06:01:59

解决方案4
-1 2021-11-03 08:18:05