Html 元素之间的弹性空间

我有两个弹性元件，它们之间需要空间， 我在它们之间加了一个边距，看起来不错，但问题是当屏幕变得最小时，第二个元素进入新行，我有一个Dudant边距：30px，看起来不太好。 我如何解决它：

我不想使用窗口大小调整事件，因为如果您在mobile中打开此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;
      }

---

我建议将这两个元素包装在父元素中，并使用

justify content:space-between

property

.parent{
显示器：flex；
证明内容：之间的空间；
宽度：50%；
}
.孩子{
高度：20px；
宽度：50px；
背景：红色；
}

---

我建议将这两个元素包装在父元素中，并使用

justify content:space-between

属性

.parent{
显示器：flex；
证明内容：之间的空间；
宽度：50%；
}
.孩子{
高度：20px；
宽度：50px；
背景：红色；
}

---

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

希望这就是你需要的

编辑：

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

函数myFunction（）{
变量i=document.getElementById（“target1”）.offsetWidth+document.getElementById（“target2”）.offsetWidth+50；
var w=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）；
如果（i>=w）
{
document.getElementById（“target1”）.style.marginRight=“0px”；
}
其他的
{
document.getElementById（“target1”）.style.marginRight=“30px”；
}
}

。项目目标比例{
弹性：3；
最小宽度：186px；
显示：内联块；
文本对齐：左对齐；
右边距：30px；
背景：绿色；
}
.项目目标栏{
弹性：1；
最小宽度：100px；
显示：内联块；
背景：红色；
}

dwd
伊格

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

希望这就是你需要的

编辑：

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

函数myFunction（）{
变量i=document.getElementById（“target1”）.offsetWidth+document.getElementById（“target2”）.offsetWidth+50；
var w=Math.max（document.documentElement.clientWidth，window.innerWidth | | 0）；
如果（i>=w）
{
document.getElementById（“target1”）.style.marginRight=“0px”；
}
其他的
{
document.getElementById（“target1”）.style.marginRight=“30px”；
}
}

。项目目标比例{
弹性：3；
最小宽度：186px；
显示：内联块；
文本对齐：左对齐；
右边距：30px；
背景：绿色；
}
.项目目标栏{
弹性：1；
最小宽度：100px；
显示：内联块；
背景：红色；
}

dwd
伊格

很高兴提供帮助：）如果这似乎是解决您问题的正确方法，请接受它。如果只有元素最小而不是winow，请调整元素大小。。。媒体查询在此不起作用。如何调整图像大小？直接在代码中还是可以在网页中扩展？你已经给它一个最小宽度186px，所以我猜图像大小调整将通过代码…@OrtalBlumenfeldLagziel请告诉我这是否是你所需要的。很高兴帮助：）如果这似乎是你问题的正确解决方案，请接受它。如果只有元素变得最小而不是winow，请调整元素大小。。。媒体查询在此不起作用。如何调整图像大小？直接在代码中还是可以在网页中扩展？你给它一个最小宽度186px，所以我猜图像大小调整将通过代码…@OrtalBlumenfeldLagziel请告诉我这是否是你需要的。

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