2

情况很简单。我需要在两个内联对象（带图像的按钮）周围环绕文本，但这些按钮应该在两行中（而不是并排）。

问题是 - 必要的按钮非常小，（小于屏幕的一半宽度） - 所以它们在一行中对齐。

这是我现在得到的：

在此处输入图像描述

这就是我想要实现的目标：

在此处输入图像描述

这是我正在试验的代码：

<html>

<body>

<a href="http://link" target="_blank">
<div style="float:right;right:30px;top:30px;display:inline-table;">
<img id="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</div> </a>

<a href="http://link" target="_blank">
<div style="float:right;right:30px;top:30px;display:inline-table;">
<img id="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</div> </a>

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. 

</body>

</html>
  • 不能使用 TableView - 因为那样按钮下会有空白空间。
  • 如果我在按钮之间输入新行 - 然后文本开始仅环绕第二个按钮。
  • 有一种可能性，我在两个按钮之间添加了一些文本，但是我需要精确计算应该从主文本中删除多少文本，记住字体可以改变等。

PS（为了更容易帮助）我正在这个网站上测试代码：w3schools

先感谢您。

4

2 回答 2

1

你可以把它们都放在一个30px宽的地方<div>，然后漂浮在<div>右边。

演示：http: //jsfiddle.net/ThinkingStiff/GdpNv/

输出：

在此处输入图像描述

HTML：

<div id="buttons" style="float:right;width:30px;">
    <a href="http://link" target="_blank">
    <div>
    <img class="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
    </div> </a>

    <a href="http://link" target="_blank">
    <div>
    <img class="imageTable" width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
    </div> </a>
</div>
于 2012-06-26T01:05:27.850 回答
1

这里至少是帮助尝试的代码。同样作为一般规则，您不应该有多个元素共享相同的 ID。

<html>
<head>
<style>
    .imageTable {
        clear: both;
        float: right;
    }
</style>
</head>
<body>
<a href="http://link" target="_blank" class="imageTable">
<img width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</a>

<a href="http://link" target="_blank" class="imageTable">
<img width="30" height="30" src="http://www.google.com/intl/lv/services/hp/images/safari-gear.png"/>
</a>

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. 

</body>

</html>
于 2012-06-26T01:08:56.227 回答