【解決方法】CSSレスポンシブマージン?

[ad_1]

2 つのタブが隣り合っており、タブの下にいくつかのテキスト (p) があります。

P の Margin-Top は、タブの最も長いコンテンツの高さと同じままです。

P の Margin-Top が常に同じになるようにするにはどうすればよいですか? 例: 20px ?

HTML

<div class="wrapper">
  
      <button> Tab 1</button>
       <button> Tab 2</button>
        
    <div id="tab" class="tabs inliner">
        <div>
            <h2>Content 1 </h2>
        
        </div>
        <div>
            <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam    </h2>
       
        </div>
    </div>
</div>
<p>Margin-Top of this text is set for the longest content. How to change that?</p>

CSS

.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
 
}
.active {
 color:blue;
}
.tabs> * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {

    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 1rem;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
}

JavaScript

const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    btn.forEach((item) => {item.classList.remove('active')})
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)
  })
}  
)

私が試したこと：

CSS は初めてで、JS の経験はありません。

誰かが私を助けてくれれば本当に感謝しています。

どうもありがとう

解決策 1

https://stackoverflow.com/users/14325417/lv[^] 答えた:

"I think you can only change the #tab height dynamically, check the code below:"

document.getElementById('tab').style.height = document.querySelector(`#tab div`).getBoundingClientRect().height + 'px'

const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    btn.forEach((item) => {item.classList.remove('active')})
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)

    const currentTab = index === 0 ? document.querySelector(`#tab div`) : document.querySelector(`#tab div + div`)
    document.getElementById('tab').style.height = currentTab.getBoundingClientRect().height + 'px'
  })
}  
)