CSS表佈局

-2

幫我採用DIV/SPANCSS表佈局

Sample output/what i want

我曾經和失敗的

<html> 
<span> 
    <span style="float:left">'.<img/> <br/> Text</span> 
    <span style="float:right"> Long text <span>an inner span</span> </span> 
    <br/> 
    <div> a blank div</div> 
</span> 
</html>

該代碼被切割粘貼從我的PHP項目的代碼創建這個佈局

如果你避免我的錯誤代碼並且寫一個新代碼會更好

來源

2011-06-27 Sourav

您的代碼不可讀，請考慮只粘貼必要的代碼。 – bingjie2680

@ bingjie2680更新 – Sourav

你不能浮動 – Kasturi

這是一個非常簡單的版本，您可以根據需要進行調整。這只是讓你開始。

<img src="" id="logo"> 
<div id="topBar"></div> 
<br class="clear" /> 
<div id="mainContent"></div> 
<textarea></textarea> 

img#logo{height:150px; width:20%; float:left; border:1px solid red;} 
div#topBar{height:150px; width:78%; border:1px solid green; float:right;} 
br.clear{clear:both;} 
div#mainContent{height:150px; width:99%; border:1px solid blue; margin-top:10px;} 
textarea{margin-top:10px; height:50px; width:99%}

http://jsfiddle.net/jasongennaro/Y7K4D/

（您可能還需要來包裝這一切wrapper div並調整每個元素的寬度和利潤，僅供參考。）

來源

2011-06-27 14:37:31

這裏是我做的一個小小的更新，擺脫了討厭的花車，並添加了textfield：http://jsfiddle.net/Y7K4D/7/ –

很好做@Andreas Carlbom。我沒有注意到'img'下的'text'。 +1 –

也許您的佈局與我的問題中的佈局完全匹配，但每當我嘗試在div中插入文本時，所有內容都會中斷，並且會出現換行符。 – Sourav

你去那裏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #wrapper { 
       width: 100px; 
      } 
      #top-group { 
       white-space: nowrap; 
      } 
      #wrapper img { 
       float: left; 
       height: 15px; 
      } 
      #wrapper #multiline { 
       display: inline-block; 
       white-space: normal; 
      } 
      #middle-group { 
       clear:both; 
      } 
     </style> 
    </head> 
<body> 

    <div id="wrapper"> 
     <div id="top-group"> 
      <img src="http://www.google.com/images/logos/ps_logo2.png" alt="" /> 
      <div id="multiline"> 
       This is multiline div. 
       This is multiline div. 
       This is multiline div. 
       This is multiline div. 
      </div> 
     </div> 
     <div id="middle-group"> 
      This is middle div content 
     </div> 
     <div id="bottom-group"> 
      <textarea cols="5" rows="2"> 
      </textarea> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-06-27 14:45:57

您錯過了圖片下方的文字。 – Sourav

回答

相關問題