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

回答

相关问题