iT邦幫忙

0

css 能否判斷 <p> 裡面是否有 <img> 或沒有?

  • 分享至 

  • twitterImage

假設

<div class="editor">
    <p>
        <img>
    </p>
</div>
<div class="editor">
    <p>
        文字...
    </p>
</div>

editor 寬度一開始必須要先設定寬度一百趴
否則假設設定八十啪,即便可以抓到 <p> 裡面的 <img> 設定為一百趴
但我希望除了「非照片」以外(文字)的都會是在八十啪的位置

.editor{
    width: 100%;
}
.editor p img{
    width: 100%;
}

文字也會跟著一百趴而不會是八十啪
會出現以上情形是因為網上分享的HTML編輯器他輸出的格式都會是這樣
名字為 summernote

harutsuki iT邦新手 5 級 ‧ 2019-05-06 19:44:31 檢舉
img 一定要在 p 裡面?
拿出來放不是更好?
火爆浪子 iT邦研究生 1 級 ‧ 2019-05-06 23:28:13 檢舉
這是編輯器產生的,我也不想放裡面
summernote
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
Jason Tsai
iT邦新手 5 級 ‧ 2019-05-12 22:02:52
最佳解答

<p>裡面的文字使用<span>包起來,然後將span的display屬性設為block,width設為80%,文字最多就只能在80%的位置。

<style>
        .editor {
            width: 100%;
        }
        .editor > p > img {
            width: 100%;
        }
        .editor > p > span {
            display: block;
            width: 80%;
        }
</style>

<div class="editor">
    <p>
        <img src="~/Content/image/red1.PNG" />
        <span>
            這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字
        </span>
    </p>
</div>
3
froce
iT邦大師 1 級 ‧ 2019-05-05 18:59:42

https://jsbin.com/hemaruyasa/3/edit?html,output

.editor{
    width: 100%
  }
  
  .editor > p{
    width: 80%
  }
  
  .editor > p > img{
    width: 125%
  }
小魚 iT邦大師 1 級 ‧ 2019-05-05 19:02:09 檢舉

CSS選擇器

froce iT邦大師 1 級 ‧ 2019-05-06 08:17:08 檢舉

你可以試著寫寫看,我是沒想到什麼合適的選擇器。

我要發表回答

立即登入回答