我是新來的。我在這方面有一些小問題。我有一張照片背景圖像右下方,並在我的PSD,我想使文字是這樣的:Original圖像css下的文本流
,但目前在我的代碼,它看起來像這樣:Current
正如你可以看到,文本實際上在div下面流動而沒有自動斷線。欣賞是否有任何解決方案,提前致謝!
我有兩個單獨的圖像。一個是背景圖像(全青色背景),另一個是絕對定位的ipad圖像,也位於背景圖像的右下角。
HTML:
<section id="ipadsection">
<div class="container fluid bgimage">
<div class="blockoftext">
Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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 adipisicing 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.
<div class="ipadimg">
<img src="assets/img/ipad.jpg" alt="ipad">
</div>
</div>
</div>
</section>
CSS:
.bgimage {
background: url('../img/backgroundipad_03.jpg');
height: 400px;
background-size: cover;
position: relative;
}
.blockoftext {
float: left;
text-align: left;
}
.ipadimg {
position: absolute;
bottom: 0px;
right: 0px;
float: right;
margin-bottom: 1px;
width:50%;
}
請您做一個小提琴演示。所以我們可以更容易地解決這個問題..你可以做.. class .ipadimg不要把它放在絕對位置,而是使它成爲'float:right;'然後文本將會被包裝。 – locateganesh
文字不是「滲入」圖像 - 圖像是__ up up_文本的一部分,_ because_您絕對定位它。絕對定位將元素排除在正常佈局流程之外,這意味着它不再影響其他元素的位置和佈局。 – CBroe
我試圖正確地浮動,但它變成這樣:。 @locateganesh – loveprogramming