CSS Tableless layout
Help me to create this layout using Div/span
the code i used and failed
<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>
This code is cut paste from my PHP project
it will be better if you avoid my faulty code and write a new one
Here is a very simple version that you can adjust as necessary. It is just to get you started.
<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/
(You might also want to wrap this all in wrapper div and adjust the widths and margins for each element, fyi.)
There you go.
<!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>
加载中,请稍侯......
精彩评论