用/填充

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;
}

这是一个小提琴http://jsfiddle.net/TQh3L/2/

在左图中，图像（小盒子）被文本包裹。我希望文本显示在左侧，并且图像要在它旁边浮动，就像它在下一列中一样，并且要对齐到中间。

//另一件事，这对我自己的屏幕分辨率是最佳的，所以基本上我真正想要的是将第一个“列”包裹起来，以便不在绿色方块上面写。谢谢！

Answer 1

为什么不使用table的完整标记？ <table>代码只能包含<tr>，<thead>，<tfoot>和<tbody>的子代。此外，<tr> / <td>应该只是表格标签的子代。任何其他方式使用标签都会播放未定义的行为。

<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

Answer 2

重新排列标记，以便浮动锚标记在之前包装div。

<强> FIDDLE

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

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

Answer 3

<强> Fiddle

是的，如果我理解正确，您只希望文字的宽度不会超过链接列的垂直空间。

你的display inline不允许我不为文字设置宽度，所以我不得不把它取出来。