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

Question

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

问题如下所示:

(对不起语言)

所以基本上我有一个基于 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>

Answer 1

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

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>