Question

帮助我使用Div / span

创建此布局

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项目中删除的粘贴

如果你避免我的错误代码并写一个新代码

会更好

Answer 1

这是一个非常简单的版本，您可以根据需要进行调整。这只是为了让你开始。

<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中并调整每个元素的宽度和边距，fyi。）

Answer 2

你去。

<!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>

CSS无表格布局

2 个答案: