将一个div对齐到与另一个div相同的长度[重复]

Question

我有一个带有两个 div 标签的页面。一个是文本，另一个是文本下方的按钮。文本各不相同，因此我无法将其设置为固定大小，并且 tekst 元素会在我放大和缩小时重新缩放。我想要按钮 1：始终与文本元素大小相同 2：按与文本元素相同的方式缩放。

我该怎么做？

.tekst{

    padding:1rem;
    font-size: 1rem;
    border:0.1rem black solid;
    margin-left: 2rem;
    max-width: 75rem;
}   


.button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    max-width:75rem; 

}

Answer 1

CSS 解决方案

如果不知道 HTML 的结构，就很难给出准确的解决方案。但是，您确实说该按钮将显示在文本下方。因此，唯一的 CSS 解决方案可能是将文本和按钮都包装在 div 和 display:inline-block 中，以便其宽度缩小到其内容。然后将.button 设置为width: 100%，从而填充其父级的宽度。因为.tekst 将设置父级的宽度（请记住，父级正在缩小以适应其内容），.button 必然与tekst 具有相同的宽度。

CSS：

.tekst-button-parent {
    display: inline-block;
}
.tekst {
    ...
}
.button {
    width: 100%;
    ...
}

HTML：

<div class="tekst-button-parent">
    <div class="tekst"> ... </div>
    <div class="button"> ... </div>
</div>

您可能需要进一步设置tekst-button-parent 的样式以占据两个元素当前所在的相同位置。

JavaScript 解决方案

或者，您可以使用 JavaScript 将 .button 的宽度设置为与每次窗口加载或调整大小时 .tekst 相同。如果您只有有两次出现这些 div，那么通过 className 识别 div 将很容易。

<script>

var setButtonSize = function(event) {
    var width = document.getElementsByClassName( "tekst")[ 0 ].innerWidth;
    document.getElementsByClassName( "button")[ 0 ].style.width = width + "px";
};

window.onresize = setButtonSize;
window.onload = setButtonSize;

</script>

如果您有不止一对.tekst 和.button，那么您需要在调整大小之前匹配每一对。

Answer 2

您应该添加一个 javascript 函数来计算宽度并设置按钮的宽度

示例：

$(function(){
	resize();
});
$(window).resize(function() {
	resize();
});

function resize(){
  $(".button").each(function(){
  var width = $('.text').width();
  var height = $('.text').height();
  $(this).css({'width': ''+width , 'height': ''+height  })
  });
}

.tekst{

    padding:1rem;
    font-size: 1rem;
    border:0.1rem black solid;
    margin-left: 2rem;
    max-width: 75rem;
}   


.button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    max-width:75rem; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?
</div>
<div class="button">

</div>