浮動圖片可以跟隨文字嗎？

我想將圖像浮動到某些文本的右側。它看起來像只在html中的文本之前浮動正確。浮動圖片可以跟隨文字嗎？

這工作：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img { 
    float: right; 
} 
</style> 
</head> 
<body> 
<p> 
<img src="http://placehold.it/100x100"/> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p> 
</body> 
</html>

這不起作用：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
img { 
    float: right; 
} 
</style> 
</head> 
<body> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<img src="http://placehold.it/100x100"/> 
</p> 
</body> 
</html>

這裏是什麼樣子的codepen，有足夠的文字，所以你可以看到浮是否工作：Example

這是一個問題，因爲我寫了一個js函數，用於將圖像從縮略圖浮動到全尺寸圖像，並且我希望圖像下的全尺寸圖像文字，不在上面。

來源

2017-04-11 Tom Cockerline

都能跟得上。 *浮動元素後面的文本和內聯元素將環繞它。 –

感謝所有誰貢獻！下面是我如何解決它：

爲圖像創建兩個圖形容器。第一個數字在文本之前，第二個數字在文本之後。第一個數字使用一個帶有CSS的類，將它漂浮並使其變小。第二個數字使用一個沒有浮點和完整顯示大小的類。第一個數字最初有「display：block」，第二個數字「display：none」，所以您只能在頁面加載時看到縮略圖。

每個圖形都有自己的onclick js功能，其目的是通過爲自己的類設置「display：none」來隱藏自身，並通過將其設置爲「display：block」來顯示其他圖形。

function displayImage(myObj) { 
 
\t /* myObj is the thumbnail img object */ 
 
\t objParent = myObj.parentElement 
 
\t objImage = objParent.getElementsByClassName("fullImage")[0]; 
 
\t \t /* Remove the classname so the Div doesn't use display: flex. */ 
 
\t objParent.className = ""; 
 
\t /* Display the image */ 
 
\t objImage.attributes.style.value = "display:block" 
 
\t /* Hide the thumbnail */ 
 
\t myObj.attributes.style.value = "display:none" 
 
} 
 

 
function displayThumbnail(myObj) { 
 
\t /* myObj is the full img object */ 
 
\t objParent = myObj.parentElement 
 
\t objThumbnail = objParent.getElementsByClassName("thumb")[0]; 
 
\t /* Add the classname so the Div uses display: flex. */ 
 
\t objParent.className = "clearfix"; 
 
\t /* Display the thumbnail */ 
 
\t objThumbnail.attributes.style.value = "display:block" 
 
\t /* Hide the image */ 
 
\t myObj.attributes.style.value = "display:none" 
 
}

.clearfix::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
.float-figure-right { 
 
\t float: right; 
 
\t width: 10%; 
 
} 
 

 
figure { 
 
    text-align: center; 
 
    font-style: italic; 
 
    font-size: smaller; 
 
    text-indent: 0; 
 
    margin: 0.5em; 
 
} 
 

 
figure.thumb { 
 
\t min-width: 10%; 
 
\t max-width: 10%; 
 
\t border: thin #882529 solid; 
 
\t padding: 0.25em; 
 
} 
 

 
figure.thumb:hover { 
 
\t min-width: 11%; 
 
\t max-width: 11%; 
 
\t border: thin #882529 dotted; 
 
} 
 

 
figure.thumb > img{ 
 
\t width: auto; 
 
}

\t <div class="clearfix"> 
 
\t \t <figure class="thumb float-figure-right" style="display:block" onmouseover="this.style.cursor='pointer'" onclick="displayImage(this)"> 
 
\t \t \t <img src="http://placehold.it/250x250" 
 
\t \t \t \t width=50 height=50> 
 
\t \t </figure> 
 
\t <p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t </p> 
 
\t \t <figure class="fullImage" style="display:none" onmouseover="this.style.cursor='pointer'" onclick="displayThumbnail(this)"> 
 
\t \t \t <img src="http://placehold.it/250x250"> 
 
\t \t \t <figcaption>Caption for the full image</figcaption> 
 
\t \t </figure> 
 
\t </div>

來源

2017-04-13 22:40:51

我會從p標記中取img，在它周圍添加一個容器div，並使用flexbox。當你的形象被改爲100％添加flex-wrap: wrap;到div，一類是容易的，而讓圖像去下面這樣：

HTML

<div class="container"> 
    <p>blah blah blah</p> 
    <img src="blah"> 
</div>

CSS

.container { 
    display: flex; 
} 

.container.full-image { 
    flex-wrap: wrap; 
}

來源

2017-04-11 20:25:14 StefanBob

感謝您的建議，StefanBob。我能夠使用你的方法得到它的工作，但決定使用不需要瀏覽器中的flex支持的不同實現。 –

不客氣，沒問題。現在所有主流瀏覽器都支持Flexbox http://caniuse.com/#feat=flexbox – StefanBob

你的花車正在實際工作。浮動通過將元素從正常流動中取出並按照您指定的方向將其定位在容器的邊緣上。第一個看起來「關閉」的原因是因爲你的img標籤已經在容器的末端。。。沒有其他地方真的去了。

另一方面，當您將img作爲段落中的第一個元素時，它的float屬性會更積極地將該元素移動到容器的另一側。希望這是有道理的，你可以閱讀更多關於漂浮在這裏MDN Float

來源

2017-04-11 20:25:52 gwar9

這是正確的。在長段中間移動圖像將使其浮到文本的右側，如預期的那樣。 +1，我無法弄清楚，這很簡單。 –

gwar9，感謝您的解釋並鏈接到MDN，這爲我澄清了情況！ –

所有你需要做的是移動圖像之前，你想它漂浮在文本，像這樣。

img { 
 
    float: right; 
 
}

<img src="http://placehold.it/100x100"/> 
 
<p>In the paragraph below, we have a paragraph with text followed by an image with style <b>float:right</b>. The float doesn't work. In the next paragraph, the image precedes the text and the float works. Can an image only be floated when it precedes the text?</p> 
 

 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</p> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<hr> 
 
<br> 
 
<p> 
 
<img src="http://placehold.it/100x100"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
</p>

來源

2017-04-11 20:31:21

-1

什麼我基本上做的是切換到讓說 - bootstrap。將對象（文本和圖像）放在同一行的grids中，並忘記浮動問題。當涉及到構建您的網站時，您會從引導中獲得一些有用的工具。

來源

2017-04-11 20:33:02 trust512

如果您有將圖像從縮略圖浮動到全尺寸圖像的js功能，則應該使用此功能將圖像從前後移動到內容後。該解決方案可以支持跨瀏覽器。

如果你想通過CSS解決它，並針對現代瀏覽器，你可以按照StefanBob的答案。

setTimeout(function() { 
 
    document.querySelectorAll('article') 
 
    .forEach(function (article) { 
 
     let thumbnail = article.querySelector('.thumb'); 
 
     thumbnail.src = thumbnail.dataset.src; 
 
    
 
     article.classList.add('full'); 
 
     article.appendChild(thumbnail); 
 
    }) 
 
    ; 
 
}, 3000);

.thumb { 
 
    float: right; 
 
} 
 

 
article { 
 
    clear: both; 
 
} 
 

 
.full img { 
 
    float: none; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<article> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    
 
    <img src="http://placehold.it/100x100" data-src="http://placehold.it/480x360" class="thumb"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p> 
 
</article> 
 

 
<article> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    
 
    <img src="http://placehold.it/100x100" data-src="http://placehold.it/480x360" class="thumb"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p> 
 
</article>

來源

2017-04-11 20:47:36

豬球，感謝這段代碼片段。我決定採取不同的實施方式，但這讓我想到了一個新的方向。 –

浮動圖片可以跟隨文字嗎？

回答

相關問題