gpt4 book ai didi

jquery - 通过 jQuery 更改高度后如何对齐一组 div 元素的顶部?

转载 作者:行者123 更新时间:2023-12-01 07:24:44 26 4
gpt4 key购买 nike

我使用 jQuery 迭代分组在一个节元素中的三个 div 元素,并均衡它们的高度。虽然该部分工作完美,但 div 的底部之前对齐的位置在垂直方向上不均匀。 div 似乎在页面上向下移动了 jQuery 添加到其高度的量。

这是一个non-problematic jsFiddle (我不改变高度)和 one with my problem (我改变了高度,它弄乱了 div)。

这是我的 CSS:

section.myGroup {
text-align : center;
}

.myBlock {
margin : 10px;
padding : 10px;
text-align : justify;
display : inline-block;
width : 275px;
background-color : #ffffff;
background-image : url('images/background.png');
background-repeat : repeat;
position: relative;
}

这是我的 HTML:

<section class="myGroup">
<div class="myBlock">
<p>Lorem ipsum bla bla bla....</p>
</div>

<div class="myBlock">
<p>Lorem ipsum bla bla bla....</p>
</div>

<div class="myBlock">
<p>Lorem ipsum bla bla bla....</p>
</div>
</section>

编辑:这是我用来均衡 div 高度的 jQuery。这是非常标准的:

var tallest = 0;

$('.myBlock').each(function() {
var thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});

$('.myBlock').height(tallest);

最佳答案

我认为复杂化是因为你无法使用“float: left”。解决方法是继续使用“float: left”,但随后您将必须使用“margin: auto”将您的部分居中。但限制是您必须指定部分的宽度:

http://jsfiddle.net/YL7ZG/3/embedded/result/

.myGroup {
width: 576px;
margin: auto;
}
.myBlock {
margin : 10px;
float: left;
padding : 10px;
text-align : justify;
width : 150px;
background-color : #ccc;
border: solid black 1px;
}

关于jquery - 通过 jQuery 更改高度后如何对齐一组 div 元素的顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10345276/

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