gpt4 book ai didi

jquery - 如何根据其他元素更改 margin ?

转载 作者:太空宇宙 更新时间:2023-11-04 10:04:21 26 4
gpt4 key购买 nike

我知道标题可能不是很准确,但我会尽力把它说清楚。另外,如果您有想法如何让它听起来更好,请告诉我,我会更改它。

问题如下所示:row

(对不起语言)

所以基本上我有一个基于 Bootstrap 的代码,它工作得很好,在不同的设备上看起来还不错,但是每个标题的字数不同,所以当我调整屏幕大小时,线条明显中断并且标题的高度变大,使图标和段落下移。而且看起来也不是很好看。 有没有办法根据第一列的标题更改第三段和图标的边距?或者有什么办法可以让它好看?

提前致谢:)

这是CSS:

   h6
{
font-size:0.95em;
color:rgb(52, 73, 94);
padding:0;
}

.pad
{
padding:15px;
}

#icon
{
width:60px;
display:inline-block;
}

p4
{
color:rgb(136, 138, 140);
text-transform:none;
font-size:0.6em;
font-weight:normal;
display:inline-block;
width:72%;
vertical-align:top;
padding-top:5px;
max-width:474px;
}

和 HTML:

    <div class="row">
<div class="col-md-4 marg">
<h6 class="pad"> Szkolenia pierwszej pomocy </h6> <img src="images/doctor-suitecase-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4> <div class="more"> Czytaj więcej... </div>
</div>
<div class="col-md-4 marg">
<h6 class="pad"> Tworzenie dokumentacji </h6> <img src="images/text-file-5-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4> <div class="more"> Czytaj więcej... </div>
</div>

<div class="col-md-4 marg">
<h6 class="pad"> Kontrola jakości <br> </h6> <img src="images/workers-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p4> <div class="more"> Czytaj więcej... </div>
</div>
</div>

最佳答案

这是一个解决方案。这将适用于您的情况

HTML

<div class="row">
<div class="col-sm-4 marg">
<h3 class="pad1"> Szkolenia pierwszej pomocy </h3>
<img src="images/doctor-suitecase-64.png" id="icon">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante. </p>
<div class="more"> Czytaj więcej... </div>
</div>
<div class="col-sm-4 marg">
<h3 class="pad2"> Tworzenie dokumentacji</h3>
<img src="images/text-file-5-64.png" id="icon">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
<div class="more"> Czytaj więcej... </div>
</div>

<div class="col-sm-4 marg">
<h3 class="pad3"> Kontrola jakości</h3>
<img src="images/workers-64.png" id="icon">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
<div class="more"> Czytaj więcej... </div>
</div>
</div>

jQuery

    <script type="text/javascript">
$(window).resize(function () {
var heig1 = $(".pad1").height();
var heig2 = $(".pad2").height();
var heig3 = $(".pad3").height();
var lrg = Math.max(heig1, heig2, heig3);
if(lrg == heig1){
$(".pad2,.pad3").height(lrg);
}
else if(lrg == heig2){
$(".pad1,.pad3").height(lrg);
}
else{
$(".pad1,.pad2").height(lrg);
}
});
</script>

关于jquery - 如何根据其他元素更改 margin ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38141124/

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