html - 左右边距、边距、显示:块/内联块自动在 div 上不起作用
问题描述
我在 AEM 中有一个场景,它位于容器级别,默认 AEM 的 CSSfloat: left
无法删除,因为整个流程都会受到影响,但是在同一个 div 上,我需要实现 max-width:1280px 居中对齐。以下代码无法删除类容器,我必须添加一个额外的类来实现它。到目前为止我尝试过的代码。注意:我不能删除浮动属性,因为它的核心组件。任何帮助将不胜感激 !!
.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>
解决方案
我不知道您可以更改什么以及不可以更改什么,但这可能会起作用:
<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>
推荐阅读
- javascript - 是否可以放置另一个 div 或 HTML 元素来替换“Hello World”文本?
- linux - FileExistsError:[Errno 17] 文件存在:'/root/analytics/venv-nerapi/lib/python3.6/lib-dynload' 同时创建虚拟环境
- blockchain - 以太坊 - 两个相同的交易,但不同的实际 Gas 使用 - 怎么会?
- excel - 枢轴层次结构中的总和
- c# - 活动指示器作为工具栏项
- android - “错误:序言中不允许内容”中的序言词是什么意思。意思是?
- elasticsearch - Logstash Elastic Cloud 401 未经授权的错误
- c# - 从 React Native 访问 ASP.NET Core 2.1 Web API 时“无法验证 HTTPS 连接”
- javascript - Angular 2+检查内容是否与父容器重叠
- angular - 在 Angular 2/4/6 应用程序中管理状态的最佳实践