Question

我有以下内容：

<ul style="width: 300px; list-style-type:none">
    <li>
        <table style="width:100%" border="0" cellpadding="0" cellspacing="0" summary="" >
            <tr>
                <td valign="top"> 
                    <img src='..' width='60px' height='50px' />
                </td>
                <td valign="top" style="padding-left:8px">
                    <p>Text here. Use all available left-over width, but stay in our own column. Expand content down vertically if required.</p>
                </td>
                <td valign="top">
                    <img src='..' width='12px' height='12px' />
                </td>
            </tr>
        </table>
    </li>
</ul>

我一直试图用div重写这个。可能吗？我想用div重写，希望我的页面产生的html更少，特别是如果我喜欢上面的100 li元素。

所以问题是，我可以使用上面的相同布局，只使用div而不是表吗？

由于

------------------------更新----------------

这是我可以得到的尽可能接近，但如果文本太长，col2文本将包裹在col1图像下。有没有办法让它只停留在自己的列的范围内，或者让col1中的图像阻止任何内容进入它下面？：

<li>
  <img src='na' style='float:left; position:relative; width:70px; height:44px; display: block;' />
  <span style='float:right; background-color: crimson;'>x</span>
  <span style='display: block; font:14px; padding-left: 10px;'>Title which can be really long and obnoxious for formatting I suppose. Carry on more and more. You would think this would be really simple to do with divs.</span>
  <div style='clear:both'></div>
</li>

Answer 1

您应该查看css框模型：http://www.w3.org/TR/CSS2/box.html

我不明白你需要什么，但我认为HTML应该是：

<p style="width: 300px">Text goes here, it will grow vertically if not enought horizontal space</p>

Answer 2

这是一个开始...... 300px总计左列：60px 右边：12px 中：228px 固定列宽

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 300px;   
}

#header {
margin: 0 0 15px 0;
background: yellow;
}

#side-a {
float: left;
width: 60px;
}

#side-b {
float: right;
width: 12px;
}

#content { 
float: left;
width: 75%;
}

#footer {
clear: both;
background: #A2A2A2;
}

HTML代码

<div id="wrapper">
<div id="header">
    HEADER
</div>
<div id="container">
    <div id="side-a">
        SIDE A
    </div>

    <div id="content">
        CONTENT
    </div>

    <div id="side-b">
        SIDE B
    </div>
</div>
<div id="footer">
    FOOTER
</div>
</div>

Answer 3

我使用了这段代码，我看不出Opera 10.6的区别


    <li>
        <div id="cont" style="position:relative;">
            <div style="width: 60px; height: 50px;float: left;"><img src="" alt="Image" style="width:60px; height:50px;" /></div>
            <div style="padding-left:8px; float:left; width:220px;"><p>Text here. Use all available left-over width, but stay in our own column. Expand content down vertically if required.</p></div>
            <div style="width: 12px; height:12px; float:left;"><img src="" alt="image" style="width:12px; height:12px;" /></div>
            <div style="clear:both" />
        </div>
    </li>

将a翻译为<div> s </div> <table> </table>

3 个答案: