我有以下代码:
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 的顶部进行书写。谢谢!
最佳答案
为什么不对 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>
...
这是一个动态添加内容到表格的演示(可以是 AJAX):
关于html - 用 <td>/<tr> 填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20364828/