根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius

机器人先生

我正在寻找一种方法来实现Twitter在其Messenger中与之相关的功能border-radius为了简化说明,我将首先添加一些照片:

图片border-bottom-left-radius集:

在此处输入图片说明

没有 图像border-bottom-left-radius

在此处输入图片说明

关于twitter如何根据附加到其的文本消息的宽度动态设置border-radius(在这种情况下border-bottom-left-radius)的想法

.image {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
    display: block;
    margin-left: auto;
    width: 70%;
}

.text {
    border-radius: 0 0 0 1.25rem;
    float: right;
    background-color: rgb(230, 236, 240);
    height: 40px;
    max-width: 70%;
    padding-top: 5px;
}

.divider {
    display:block; 
    margin-top: 80px;
}
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div class="text">
    <span>This is the text</span>
</div>

<div class="divider"></div>

<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div class="text">
    <span>This is just a relatively longer text for the sake of demonstrating this example!!</span>
</div>

马克西·奎

因此,根据您的说明。

border-radius为您的班级添加了一个img如下所示:

border-radius: 1.25rem 1.25rem 0 0;

然后,我在您的文本类中添加了填充,以使其更美观,更美观。替换您span的设置p元素,如下所示:

.text p{
  margin: 0 7px;
}

这样,文本就远离了border-radius

您需要添加到课程中 .text { width: fit-content}

因此,border-bottom-left-radius当文本宽度等于img宽度时,我们最终添加了js进行调整并且我们创建了在宽度相等的情况下添加的类:

.border-bottom-left-radius{
  border-bottom-left-radius: 0 !important;
}

正如hatef在评论中提到的那样。重新加载窗口是动态的,但不能调整大小。为此,我从此答案中的现有代码改编了代码:使用javascript检测div宽度何时更改

通过添加此js,它将检测body元素的更改(如果将其调整大小):

displayWindowSize();
window.addEventListener("resize", displayWindowSize);

function displayWindowSize(){
    const imgEl = document.getElementById('img');
    const textEl = document.getElementById('text');

  if(imgEl.offsetWidth <= textEl.offsetWidth){
      imgEl.classList.add("custom-radius");
  }

  if(imgEl.offsetWidth > textEl.offsetWidth){
    imgEl.classList.remove("custom-radius");
  }
}
.image {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
    display: block;
    margin-left: auto;
    width: 70%;
}

.text{
    float: right;
    background-color: rgb(230, 236, 240);
    border-radius: 0 0 0 1.25rem;
    margin-left: auto;
    width:fit-content;
    max-width: 70%;
    padding: 5px 0;
}

.text span{
  display:block;
  padding-left: 20px;
  padding-right: 5px;
}

.custom-radius {
  border-bottom-left-radius: 0 !important;
}
<img id="img" class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div id="text" class="text">
    <span>This is the text This is a text this is a text</span>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章