单击“更多”按钮位置时出错。

Question

我已经实现了一个可折叠的div，它会在单击“阅读更多”按钮时扩展。 一切正常。 但是通过扩展按钮位置会出错。 当卡未展开时，我希望按钮位于卡上按钮所在的相同位置。

这是我的代码

  * { font-family: verdana, sans-serif; } #more { display: none; } .wrap-collabsible { margin-bottom: 1.2rem 0; margin-top: 40px; } input[type='checkbox'] { display: none; } #myBtn { display: block; float: right; font-weight: bold; font-family: Verdana, sans-serif; text-transform: uppercase; text-align: center; border: none; padding: 1rem; outline: none; color: #A77B0E; background: #FAE042; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } #myBtn:hover { color: #7C5A0B; } /* .lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } */ .toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } .collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } .toggle:checked+.lbl-toggle+.collapsible-content { max-height: 350px; } .toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .collapsible-content .content-inner { background: rgba(250, 224, 66, .2); border-bottom: 1px solid rgba(250, 224, 66, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } .Add { font-weight: bolder; } .wrapper { padding: 0px 15px 0px 15px; display: table-cell; } .box { padding: 10px; box-shadow: 5px 4px 9px 0px #d8d7d7; border: 1px solid #eeee; } .inner-box { width: 30%; float: left; display: table-cell; } .Text-box { font-family: verdana, sans-serif; margin-top: -16px; } .Add-text { font-weight: bolder; } .text { color: blue; } .img { max-width: 88%; height: auto; } #conditional-tag { display: none; } 

 <div Class="box"> <p class="Add" id="conditional-tag">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor </p> <div class="inner-box"> <img src="house.jpg" class="img"> </div> <div class="wrapper"> <p class="Text-box"> <p class="Add" id="hideOnClick">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor</p> <p class="text">2 Storey Terrace House</p> <p>Size &nbsp;&nbsp;&nbsp;&nbsp; : 1,860/1,302 sq.ft</p> <p>Tenure &nbsp;&nbsp;&nbsp;&nbsp; : Freehold</p> <p class="Add-text">RM37,8000</p> <span id="dots">...</span> <span id="more"> <!--p style="font-weight: bolder;">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor</p--> <p class="text">2 Storey Terrace House</p> <p>Size &nbsp;&nbsp;&nbsp;&nbsp; : 1,860/1,302 sq.ft</p> <p>Tenure &nbsp;&nbsp;&nbsp;&nbsp; : Freehold</p> <p class="Add-text">RM37,8000</p> </span> </p> <button onclick="myFunction()" id="myBtn">Read more ></button> <script> function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); document.getElementById('hideOnClick').innerHTML = "Hello to the world"; document.getElementById('conditional-tag').style.display = "block"; if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; document.getElementById('hideOnClick').innerHTML = "No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor"; document.getElementById('conditional-tag').style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less >"; moreText.style.display = "inline"; } } </script> </div> </div> 

我想在卡片折叠前后将按钮放在相同的位置。 我怎么才能得到它？

Answer 1

在这里，我删除了float: right并添加了position:relative; 并设置right:250px; 。

  * { font-family: verdana, sans-serif; } #more { display: none; } .wrap-collabsible { margin-bottom: 1.2rem 0; margin-top: 40px; } input[type='checkbox'] { display: none; } #myBtn { position: relative; left: 250px; display: block; font-weight: bold; font-family: Verdana, sans-serif; text-transform: uppercase; text-align: center; border: none; padding: 1rem; outline: none; color: #A77B0E; background: #FAE042; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } #myBtn:hover { color: #7C5A0B; } /* .lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } */ .toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } .collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } .toggle:checked+.lbl-toggle+.collapsible-content { max-height: 350px; } .toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .collapsible-content .content-inner { background: rgba(250, 224, 66, .2); border-bottom: 1px solid rgba(250, 224, 66, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } .Add { font-weight: bolder; } .wrapper { padding: 0px 15px 0px 15px; display: table-cell; } .box { padding: 10px; box-shadow: 5px 4px 9px 0px #d8d7d7; border: 1px solid #eeee; } .inner-box { width: 30%; float: left; display: table-cell; } .Text-box { font-family: verdana, sans-serif; margin-top: -16px; } .Add-text { font-weight: bolder; } .text { color: blue; } .img { max-width: 88%; height: auto; } #conditional-tag { display: none; } 

 <div Class="box"> <p class="Add" id="conditional-tag">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor </p> <div class="inner-box"> <img src="house.jpg" class="img"> </div> <div class="wrapper"> <p class="Text-box"> <p class="Add" id="hideOnClick">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor</p> <p class="text">2 Storey Terrace House</p> <p>Size &nbsp;&nbsp;&nbsp;&nbsp; : 1,860/1,302 sq.ft</p> <p>Tenure &nbsp;&nbsp;&nbsp;&nbsp; : Freehold</p> <p class="Add-text">RM37,8000</p> <span id="dots">...</span> <span id="more"> <!--p style="font-weight: bolder;">No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor</p--> <p class="text">2 Storey Terrace House</p> <p>Size &nbsp;&nbsp;&nbsp;&nbsp; : 1,860/1,302 sq.ft</p> <p>Tenure &nbsp;&nbsp;&nbsp;&nbsp; : Freehold</p> <p class="Add-text">RM37,8000</p> </span> </p> <button onclick="myFunction()" id="myBtn">Read more ></button> <script> function myFunction() { var dots = document.getElementById("dots"); var moreText = document.getElementById("more"); var btnText = document.getElementById("myBtn"); document.getElementById('hideOnClick').innerHTML = "Hello to the world"; document.getElementById('conditional-tag').style.display = "block"; if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; document.getElementById('hideOnClick').innerHTML = "No. 60, Jalan Pendamar Indah 1B, Taman Pendamar Indah, Pelabuhan Klang, Selangor"; document.getElementById('conditional-tag').style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less >"; moreText.style.display = "inline"; } } </script> </div> </div> 

Answer 2

您只需要在类div中包装div-内部容器和包装器就位于容器div中，这将解决您的问题。 当前的问题是包装器div的宽度不为100％，因此您会看到“ Read Less”按钮未正确放置。

<div>
    <div class="inner-box">
        <!-- your existing code here -->
    </div>
    <div class="wrapper">
        <!-- your existing code here -->
    </div>
</div>

小提琴供您参考： http : //jsfiddle.net/c1w8p7yj/