2013-02-18 48 views
0

我只能找到如何執行我的文本正在執行的操作。不妨礙它。我會文字不包裝在圖像下。但我不能使用固定的寬度。調整頁面大小時,文本需要在同一列中繼續。使文本正確格式化並且不包含在div列中

http://jsfiddle.net/avHcA/

<div id="apDiv1"> 
    <div id="apDiv2"> 
    <strong>image goes here</strong> 
    </div> 
    <div id="apDiv3" ><p><strong>Name Goes here in div with main text</strong></p> 
    <p>text that I want to stay in its it div and not wrap underneath the 
    image goes here</p></div></div> 

回答

0

如果使用百分比寬度,如下圖所示:

#apDiv2 { 
    float: left; 
    padding-right: 2%; 
    width: 38%; 
    z-index: 2; 
} 


#apDiv3 { 
    float: left; 
    width: 60%; 
    z-index: 3; 
} 

然後文本將繼續在同一列,即使在調整窗口大小。只要確保在#apDiv1之後清除浮游物。要清除浮游物,請添加如<div class="clear"></div>,其中清除類的css如下所示:

.clear { clear: both; } 
+0

couldnt我可以在apDiv1中清除它?因爲float不適用於那裏和它的父標籤,它會清除它們嗎? – user1931022 2013-02-18 04:35:35

+0

並與此分開。它仍然無法正常工作。可能是因爲我試圖用文字來實現它(我討厭wordpress,但是它選擇與之合作)。 – user1931022 2013-02-18 05:57:19

0

要做到這一點是使用一個表的最佳方式。 http://jsfiddle.net/YymYF/

我剛剛複製的div到自己的表格單元格

<table> 
    <tr> 
    <td> 
     <strong><a href="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg"><img class="alignleft wp-image-131" style="border: 0px none;" alt="" src="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg" width="166" /></a></strong> 
    </td> 
    <td> 
     <p><strong>Cheryl Casciani</strong></p> 
     <p>Cheryl Casciani is the Director of Neighborhood Sustainability for the 
     Baltimore Community Foundation (BCF) where she is responsible for management 
     of a range of initiatives aimed at strengthening Baltimore neighborhoods 
     and making Baltimore a more sustainable city. Cheryl also serves as the 
     Chair of the Baltimore Commission on Sustainability, which was created 
     in 2008 and charged with developing and monitoring the implementation of 
     Baltimore's Sustainability Plan. She has a Master's in Public and Private 
     Management from the Yale School of Management and a Bachelors of Science 
     in Economics and Bachelors of Applied Science from the University of Pennsylvania.</p> 
    </td> 
    </tr> 

玩的表格屬性,使它看起來更可取。

相關問題