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>

将一个div与另一个对齐

2 个答案:

CSS解决方案

JavaScript解决方案