假設
<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
<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>
https://jsbin.com/hemaruyasa/3/edit?html,output
.editor{
width: 100%
}
.editor > p{
width: 80%
}
.editor > p > img{
width: 125%
}