html - 用 / 填充

Question

我有以下代码:

HTML

<div id="box">
<tr><div class="wrapper"><div class="text">something</div></div><td><a href="#" ><img class="square" src="http://i.imm.io/1ld94.png"/></a><a href="#" ><img src="http://i.imm.io/1ld98" class="square" /></a></td></tr><hr>
<tr><div class="wrapper"><div class="text">something</div></div><td><a href="#" ><img class="square" src="http://i.imm.io/1ld94.png"/></a><a href="#" ><img src="http://i.imm.io/1ld98" class="square" /></a></td></tr><hr>
<tr><div class="wrapper"><div class="text">In this text, what I really want is for the div to word-wrap around somewhere in (ignore ....) THIS point instead of going on on top of the green square</div></div><td><a href="#" ><img class="square" src="http://i.imm.io/1ld94.png"/></a><a href="#" ><img src="http://i.imm.io/1ld98" class="square" /></a></td></tr><hr>
  </div>

CSS

.wrapper{
    padding-right:100px;
    display:inline;
}

.text{
display:inline;
position:relative;
font-family:lucida grande,tahoma,verdana,arial,sans-serif;
font-size:13px;
letter-spacing: 0px; 
}

.square{
    width: 20px;
    float: right;
    vertical-align:text-top;
    display:block;
}

#box{
    height: 575px;
    width: 50%;
    float: left;
    border: 2px solid blue;
    padding:20px;
    overflow-y:scroll;
}

这是一个 fiddle http://jsfiddle.net/TQh3L/2/

在左图中，图像(小方框)被文本包裹着。我希望文本显示在左侧，图像漂浮在它旁边，就好像它在下一列中一样，并且对齐到中间。

//另一件事，这对我自己的屏幕分辨率来说是最佳的，所以基本上我真正想要的是环绕第一个“列”，这样就不会在绿色方 block 的顶部进行书写。谢谢!

Answer 1

为什么不对 table 使用完整标记？ ？ <table>标签只能有 <tr> 的子标签, <thead> , <tfoot> , 和 <tbody> .此外，<tr>/<td>应该只是表格标签的 child 。以任何其他方式使用标签都是在玩弄未定义的行为。

<div id="box">
    <table>
        <tr>
            <td class="wrapper">
                <div class="text">something</div>
            </td>
            <td><a href="#"><img class="square" src="http://i.imm.io/1ld94.png"/></a><a href="#"><img src="http://i.imm.io/1ld98" class="square" /></a>

            </td>
        </tr>
    </table>
    <hr/>
    <table>
        ...

JSFiddle Demo

这是一个动态添加内容到表格的演示(可以是 AJAX):

Dynamic Demo