第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

根據(jù)兄弟姐妹的寬度動(dòng)態(tài)設(shè)置 CSS border-bottom-left-radius

根據(jù)兄弟姐妹的寬度動(dòng)態(tài)設(shè)置 CSS border-bottom-left-radius

楊魅力 2023-03-24 16:09:20
我正在尋找一種方法來(lái)實(shí)現(xiàn) Twitter 在他們的 Messenger 中所做的關(guān)于border-radius. 為了更容易解釋，我將首先添加一些照片：圖像border-bottom-left-radius集：沒(méi)有 圖像border-bottom-left-radius：關(guān)于 twitter 如何根據(jù)附加的文本消息的寬度動(dòng)態(tài)設(shè)置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貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

所以根據(jù)你的解釋。


我border-radius為你的班級(jí)添加了一個(gè)img如下：


border-radius: 1.25rem 1.25rem 0 0;

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


.text p{

  margin: 0 7px;

}

這樣 text 就遠(yuǎn)離了border-radius.


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


所以我們最終添加了js來(lái)調(diào)整border-bottom-left-radius當(dāng)文本寬度等于img寬度時(shí)。我們創(chuàng)建類以在寬度相等的情況下添加：


.border-bottom-left-radius{

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

}

正如 hatef 在評(píng)論中提到的那樣。重新加載窗口是動(dòng)態(tài)的，但不調(diào)整大小。為此，我從這個(gè)答案中的現(xiàn)有代碼中改編了代碼：使用 javascript 檢測(cè)何時(shí)更改 div 寬度


通過(guò)添加這個(gè) js 來(lái)檢測(cè) body 元素的變化（如果它會(huì)被調(diào)整大小）：


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>


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 1 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)