當嵌入塊移動到圖像底部時，刪除圖像的浮動屬性

我有三個元素，一個是標題，另一個是段落，另一個是圖像。現在，我希望圖像浮動到右側，讓標題和段落浮動到左側和底部，如「圖片1」。當嵌入塊移動到圖像底部時，刪除圖像的浮動屬性

爲了不縮小標題和縮小外部div （藍框），我在標題上使用display:inline-block。

但是，這裏的問題：如果我縮小外部div的寬度，使標題移動到圖像的底部，圖像仍然對齊到右側，如「圖像3」。但是我需要什麼就像「圖像2」一樣，圖像應該與左邊對齊。

如果內嵌塊標題移動到圖像的底部，是否有任何方法可以刪除圖像的浮動屬性？

#div0{ 
 
    width: 1000px; 
 
} 
 

 
#div1{ 
 
    width: 550px; 
 
} 
 

 

 
.outer{ 
 
    margin: 20px 0; 
 
    border: 1px solid blue; 
 
} 
 

 
.image{ 
 
    float: right; 
 
} 
 

 
.title{ 
 
    display: inline-block; 
 
} 
 

 
.paragraph{ 
 
}

<div id="div0" class="outer"> 
 
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" class="image" /> 
 
    <h1 class="title">This Is the Title...</h1> 
 
    <div class="paragraph">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
 
</div> 
 

 
<div id="div1" class="outer"> 
 
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" class="image" /> 
 
    <h1 class="title">This Is the Title...</h1> 
 
    <div class="paragraph">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
 
</div>

來源

2017-02-15 Banana Code

這不能單獨使用CSS來完成。其他答案是正確的，最好的方法是插入@media查詢，但爲了知道斷點的大小，您必須知道運行時的確切寬度。（這取決於很多因素，所以它不是一個常數。）

所以要走的路是使用一些JavaScript來創建媒體查詢。這將計算最大寬度作爲標題的寬度加上圖像的寬度加上邊框的寬度和外邊距（我認爲是18px）。

document.head.innerHTML += '<style>\n'+ 
 
    '@media (max-width: '+(document.querySelector('h1.title').offsetWidth+ 
 
     document.querySelector('img.image').offsetWidth+18)+'px) {\n'+ 
 
    ' .image {float:none}\n'+ 
 
    '}\n</style>\n';

.outer{ 
 
    margin: 20px 0; 
 
    border: 1px solid blue; 
 
} 
 

 
.image{ 
 
    float: right; 
 
} 
 

 
.title{ 
 
    display: inline-block; 
 
}

<div id="div0" class="outer"> 
 
    <img src="http://www.w3school.com.cn/i/eg_tulip.jpg" class="image" /> 
 
    <h1 class="title">This Is the Title...</h1> 
 
    <div class="paragraph">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
 
</div>

來源

2017-02-15 09:21:52

您可以使用媒體查詢。

@media only screen and (max-width:960px) { 
    .image{ 
     float: none; 
    } 
}

您可以將「960px」更改爲希望更改發生的寬度。

來源

2017-02-15 07:10:43 Gezzasa

但我怎麼會知道寬度的值，如果寬度不固定？（我不想用Javascript來解決這個問題） –

@BananaCode如果你使用chrome打開開發者模式，你可以在調整大小時看到當前瀏覽器窗口的寬度。使用它來確定圖像何時需要丟失其浮點數。 – Gezzasa

檢查Web瀏覽器檢查元素的寬度值。

來源

2017-02-15 07:23:17

當嵌入塊移動到圖像底部時，刪除圖像的浮動屬性

回答

相關問題