时间戳

首页 > 解决方案 > 元素之间的弹性空间

html - 元素之间的弹性空间

问题描述

我有两个 flex 元素，我需要它们之间的空间，我在它们之间添加了一个边距，它看起来很棒，但问题是当屏幕变得最小时，第二个元素下降到新行并且我有多余的边距-对：30px，看起来不太好。我该如何解决： 在此处输入图像描述

在此处输入图像描述

我不想使用窗口调整大小事件，因为如果您在移动设备中打开此 ui，那么一开始您将这两个项目放在单独的行中。

.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
      }

标签： htmlcssflexbox

解决方案

为此目的使用媒体查询。检查您的页面并找出何时发生换行符（使用 devtools 它以像素为单位提供精确的视口宽度）。

    @media screen and (min-width:'calculated'px)
    {
        .item-target-scale {
        margin-right: 0px;
    }
}

希望这是你需要的。

编辑：

如果元素大小不固定，请使用此选项：

function myFunction(){
var i=document.getElementById("target1").offsetWidth+document.getElementById("target2").offsetWidth+50;
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(i>=w)
{
	document.getElementById("target1").style.marginRight="0px";
}
else
{
	document.getElementById("target1").style.marginRight="30px";
}
}
.item-target-scale {
        flex: 3;
        min-width: 186px;
        display: inline-block;
        text-align: left;
        margin-right: 30px;
        background:green;
      }

      .item-target-bar {
        flex:1;
        min-width: 100px;
        display: inline-block;
        background:red;
      }
<body onresize="myFunction()" onload="myFunction()">

<div class="item-target-scale" id="target1">
dwdwdwdwd
</div>
<div class="item-target-bar" id="target2">
eegerg
</div>

</body>

我将需要 HTML 代码来获取项目的其余大小，但这可以通过检查来完成。因此，只需在“i”中添加剩余元素的宽度。

推荐阅读