gpt4 book ai didi

html - 换行后删除内联 block 元素的边距

转载 作者:技术小花猫 更新时间:2023-10-29 12:24:25 24 4
gpt4 key购买 nike

我希望有一种不用 JavaScript 就能做到这一点的方法。我用内联 block 显示了两个元素。它们的宽度和高度均为 200 像素,因此它们都出现在同一行上,除非浏览器的尺寸非常小(或使用移动浏览器)。我希望两个元素之间有一个 50px 的空间,所以在第二个元素上我添加了“margin-left: 50px”,效果很好。当浏览器调整到两个元素不能放在同一行的大小时,第二个元素换行到下一行,这是我想要它做的。问题是第二个元素仍然有 50px 的左边距,所以元素没有出现在中心。我可以添加 JavaScript 来检测容器高度何时发生变化(即元素换行到下一行)并删除左边距,但是有没有办法在没有 JavaScript 的情况下完成此操作?

这是我的代码,经过简化:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>

fiddle :http://jsfiddle.net/YRshx/

最佳答案

基于 bastianonm 的解决方案,试试这个:

    <div id="wrapper" style="text-align: center; margin:0 -25px;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>

http://jsfiddle.net/YRshx/6/

关于html - 换行后删除内联 block 元素的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16977631/

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