好的，我明白这个主题已经涵盖了。但我研究了各种解决方案，但收效甚微。
我只是不知道为什么会这样margin: 0 auto;不管用。我尝试用以下方法补偿填充width: calc(33% - 40px);，但这不起作用。
任何关于为什么会发生这种情况的帮助以及解决方案将不胜感激！
.container {
margin: 0 auto;
}
[class*='col-'] {
float: left;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-word {
width: auto;
height: auto;
padding: 25px;
border: 5px #000 solid;
border-left: 0px;
border-right: 0px;
background-color: #A7F4F6;
font-size: xx-large;
text-align: center;
}
<div class='container'>
<div class="grid">
<div class='grid'>
<div class="col-1-3">
<p class='col-word'>T</p>
<p class='col-word'>V</p>
</div>
</div>
<div class='grid'>
<div class='col-1-3'>
<div class='letter'>W</div>
</div>
<div class='col-1-3'>
<div class='letter'>P</div>
</div>
<div class='col-1-3'>
<div class='letter'>V</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xm2gvzbf/5/
这是工作。
问题是你正在集中一个div，默认情况下它是一个块级元素，因此占据其父元素的 100% 宽度 (body， 在这种情况下）。因此没有空间可以水平移动，因此没有空间可以居中。
有关说明，请参阅此修改后的演示，其中添加了边框.container.
.container {
margin: 0 auto;
border: 1px solid red;
}
[class*='col-'] {
float: left;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-word {
width: auto;
height: auto;
padding: 25px;
border: 5px #000 solid;
border-left: 0px;
border-right: 0px;
background-color: #A7F4F6;
font-size: xx-large;
text-align: center;
}
<div class='container'>
<div class="grid">
<div class='grid'>
<div class="col-1-3">
<p class='col-word'>T</p>
<p class='col-word'>V</p>
</div>
</div>
<div class='grid'>
<div class='col-1-3'>
<div class='letter'>W</div>
</div>
<div class='col-1-3'>
<div class='letter'>P</div>
</div>
<div class='col-1-3'>
<div class='letter'>V</div>
</div>
</div>
</div>
</div>
如果你减少宽度.container你会看到居中工作。这是第二个演示，其中width: 50%应用于.container.
.container {
margin: 0 auto;
border: 1px solid red;
width: 50%;
}
[class*='col-'] {
float: left;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.col-word {
width: auto;
height: auto;
padding: 25px;
border: 5px #000 solid;
border-left: 0px;
border-right: 0px;
background-color: #A7F4F6;
font-size: xx-large;
text-align: center;
}
<div class='container'>
<div class="grid">
<div class='grid'>
<div class="col-1-3">
<p class='col-word'>T</p>
<p class='col-word'>V</p>
</div>
</div>
<div class='grid'>
<div class='col-1-3'>
<div class='letter'>W</div>
</div>
<div class='col-1-3'>
<div class='letter'>P</div>
</div>
<div class='col-1-3'>
<div class='letter'>V</div>
</div>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
