2016-04-09 79 views
0

我是新來的。我在這方面有一些小問題。我有一張照片背景圖像右下方,並在我的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%; 
} 
+1

請您做一個小提琴演示。所以我們可以更容易地解決這個問題..你可以做.. class .ipadimg不要把它放在絕對位置,而是使它成爲'float:right;'然後文本將會被包裝。 – locateganesh

+0

文字不是「滲入」圖像 - 圖像是__ up up_文本的一部分,_ because_您絕對定位它。絕對定位將元素排除在正常佈局流程之外,這意味着它不再影響其他元素的位置和佈局。 – CBroe

+0

我試圖正確地浮動,但它變成這樣:![Valid XHTML](http://i.imgur.com/HsC3DKh.png?1)。 @locateganesh – loveprogramming

回答

1

與現有代碼的主要問題是position: absolute你使用和圖像元素並沒有在標記放在正確的。

由於<div class="ipadimg"> div(及其CSS規則)是沒有必要的,我刪除了它,在最後一段之前移動了img並添加了這個新規則。

.blockoftext img { 
    float: right; 
} 

棧片斷

.blockoftext { 
 
    float: left; 
 
    text-align: left; 
 
} 
 
.blockoftext img { 
 
    float: right; 
 
}
<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. 
 
    <img src="http://www.placehold.it/300x150" alt="ipad"> 
 
    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>

更新基於評論

這裏是分裂成2組的文本。不利的一面是,用戶可以編輯文本,需要知道它必須被分割,因此文本的一部分將環繞圖像。

旁註:

我個人會通過使文本模板,然後解決這個問題測量的新編輯的文本,然後注入浮動圖像進去。 (雖然我不使用示例,但因爲我不使用WordPress)

如果允許用戶編輯文本,那麼也可以讓他們更改圖像。他們的文字可能會說這是不準確的,在CSS現有的一個

.blockoftext, .blockoftext-withimg { 
 
    float: left; 
 
    text-align: left; 
 
} 
 
.img-right { 
 
    float: right; 
 
}
<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. 
 
</div> 
 

 
<div class="blockoftext-withimg"> 
 
    <img class="img-right" src="http://www.placehold.it/300x150" alt="ipad"> 
 
    
 
    <span class="txt-left"> 
 
    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. 
 
    </span> 
 
</div>

+0

這是迄今爲止最接近解決它的問題,但問題是,我將其轉換爲wordpress,並希望能夠使文本塊成爲其他人可以編輯的自定義字段。如果我將其轉換爲自定義字段,圖像仍將位於文本塊的下面。 – loveprogramming

+0

@loveprogramming然後你需要使它成爲2個自定義字段,一個帶有圖像,一個沒有。將在一秒內更新我的答案。與第二個標記結構。 – LGSon

+0

@loveprogramming更新。爲了澄清,漂浮的圖像不能放在最後,並給出想要的文本流(或至少我所知道的)。我會再調查一下,如果有一個,我會更新我的答案並通知你。 – LGSon

0

float屬性是所有你需要創建文本,你的形象「周圍包裹」。這將創建一個位於文檔文本流內的圖像,但會向左或向右「漂浮」。

如果您使用了特定類型的元素定位,例如position: absolute,則會忽略「浮動」。當您使用絕對定位時,圖片實際上是從文檔流程中取出的,並放置在它自己的「圖層」上,這就是它顯示在文本頂部的原因。爲了讓您的佈局工作,你可能需要做到以下幾點:

  • 從圖片中刪除絕對定位
  • 不浮動文本 - 放置文本正常內嵌的內容。
  • 將圖片置於文本中,並將其浮動到右側。

你可以找到更多關於這裏的浮動圖片:

http://www.w3schools.com/css/css_float.asp