gpt4 book ai didi

html - 水平居中 2 列 div,无需修改 HTML(仅 CSS)

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:07 28 4
gpt4 key购买 nike

我有这个简单的 HTML 代码(我不能修改它,div 中没有 div):

<div id="container">
<div id="a">
Title col
</div>
<div id="b">
Left col
</div>
<div id="c">
Right col
</div>
</div>

自带这个CSS代码(我只能加规则,不能删代码):

#container {
width: 100%;
}
#a {
width: 400px;
margin: auto;
}
#b {
width: 300px;
float: left;
}
#c {
width: 100px;
float: left;
}

“b”和“c”div 不是水平居中的,你可以在这里查看结果:http://jsfiddle.net/x5qKN/

我想将这两个 div 水平居中。我认为这很容易,但我不知道该怎么做。我尝试了这篇文章的不同答案:“How to horizontally center a <div> in another <div>?”,但它并没有解决问题。有解决办法吗?

非常感谢(我希望这不是重复的帖子)

最佳答案

当然,诀窍是不要 float ,而是 display:inline-block 最后两项,同时在父容器上设置 text-align:center。将字体大小设置为零然后返回意味着元素之间没有空格。

Demo Fiddle

div {
font-size:14px;
box-sizing:border-box;
}
#container {
width: 100%;
text-align:center;
font-size:0;
}
div:not(#container) {
text-align:left;
}
#a {
width: 400px;
border:1px solid black;
margin: auto;
}
#b {
width: 300px;
display:inline-block;
border:1px solid black;
}
#c {
width: 100px;
display:inline-block;
border:1px solid black;
}

关于html - 水平居中 2 列 div,无需修改 HTML(仅 CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25120905/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com