首頁猿問根據兄弟姐妹的寬度動態設置 CSS...

根據兄弟姐妹的寬度動態設置 CSS border-bottom-left-radius

JavaScript

楊魅力 2023-03-24 16:09:20

我正在尋找一種方法來實現 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>

查看完整描述

1 回答

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

所以根據你的解釋。

我border-radius為你的班級添加了一個img如下：

border-radius: 1.25rem 1.25rem 0 0;

然后我在你的文本類中添加了一個填充，使它更好，最后。替換您的span設置p元素如下：

.text p{

margin: 0 7px;

}

這樣 text 就遠離了border-radius.

你需要添加到你的班級.text { width: fit-content}

所以我們最終添加了js來調整border-bottom-left-radius當文本寬度等于img寬度時。我們創建類以在寬度相等的情況下添加：

.border-bottom-left-radius{

border-bottom-left-radius: 0 !important;

}

正如 hatef 在評論中提到的那樣。重新加載窗口是動態的，但不調整大小。為此，我從這個答案中的現有代碼中改編了代碼：使用 javascript 檢測何時更改 div 寬度

通過添加這個 js 來檢測 body 元素的變化（如果它會被調整大?。?/p>

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;

}

</div>

反對回復 2023-03-24

1 回答
0 關注
158 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

根據兄弟姐妹的寬度動態設置 CSS border-bottom-left-radius

根據兄弟姐妹的寬度動態設置 CSS border-bottom-left-radius

1 回答

添加回答