Question

我试图根据页面和列大小调整div的大小。无论宽度如何，div必须始终为正方形。我的意思是：

当它连续设置时，它占用了它分配的空间量。在这种情况下，文本占用了50％的空间。剩余的50％必须由方形div占用。

当它设置为列（堆叠在较小的屏幕上）时，它占用了它分配的空间量。在这种情况下，square div是屏幕的整个宽度。

div.layout-1-img{
    flex: 1;
    background-color: gray;
    width: 5em;
    height:5em;
}

Jsfiddle

Answer 1

据我所知：你有一个div将包含你想要的文本，但这个div的宽度和高度会发生变化。无论页面宽度如何，你都希望outerdiv始终是SQUARE，但仍然有文本div。

可能的解决方案：

创建一个外部div：

.outerDiv{
display: block;
position: absolute;
background-color: gray;
padding: 10px;   // Specify the padding value if you want
}

然后使用jquery：

    $(document).ready(function(){

       //Get the text div height and width
    var height = $('#textdiv').height();
    var width = $('#textdiv').width();

// increase the size of height or width by 
// How much taller you want the back to be compared to text div.
//In this example I'm increasing the background by a factor of 2

height = height *2;
width = width *2;

    //Compare to see which one is largest.
// Then change css of background to correspond to the correct size

if(height>width){
$('.outerDiv').height(height);
$('.outerDiv').width(height);
}else{
$('.outerDiv').height(width);
$('.outerDiv').width(width);
}

    });

在flexbox中调整div

1 个答案: