Html 围绕两行中的两个内联对象的文本换行_Html_Xhtml

Html 围绕两行中的两个内联对象的文本换行

html

Html 围绕两行中的两个内联对象的文本换行,html,xhtml,Html,Xhtml,情况很简单。我需要将文本环绕在两个内联对象（带有图像的按钮）周围，但这些按钮应该分为两行（而不是并排）问题是，必要的按钮非常小（不到屏幕的一半宽），所以它们排成一行这是我现在得到的： <html> <body> <a href="http://link" target="_blank"> <div style="float:right;right:30px;top:30px;display:inline-table;"> <img i

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

问题是，必要的按钮非常小（不到屏幕的一半宽），所以它们排成一行

这是我现在得到的：

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

以下是我努力实现的目标：

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

下面是我正在试验的代码：

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


无便利。水平扫描电镜。莫比·伊德·乌尔纳戴着钻石首饰。法律上的侵权行为。阿利奎姆·埃拉特·帕特。乌尔特里斯河、白喉河、狮子河、白喉河。Lorem ipsum dolor sit amet，是一位杰出的领导者。酒后驾车。白葡萄酒、白葡萄酒、苦艾酒、维韦拉葡萄酒、维利特葡萄酒。塞德·伊尼姆·里苏斯、康格·农、特里斯提克、康莫多·欧盟、梅特斯。

无法使用TableView，因为这样按钮下就会有空白
若我在按钮之间输入一个新行，那个么文本只开始环绕第二个按钮
有一种可能性，我在两个按钮之间添加了一点文本，但是我需要精确计算应该从主文本中剪切多少文本，记住字体可以改变等等

附言（便于帮助）我正在这个网站上测试代码：

提前谢谢。

您可以将它们放在

30px宽
中，然后将
向右浮动
演示：
输出：

HTML:
以下是帮助尝试的代码。作为一般规则，您不应该让多个元素共享同一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>


.imageTable{
明确：两者皆有；
浮动：对；
}
无便利。水平扫描电镜。莫比·伊德·乌尔纳戴着钻石首饰。法律上的侵权行为。阿利奎姆·埃拉特·帕特。乌尔特里斯河、白喉河、狮子河、白喉河。Lorem ipsum dolor sit amet，是一位杰出的领导者。酒后驾车。白葡萄酒、白葡萄酒、苦艾酒、维韦拉葡萄酒、维利特葡萄酒。塞德·伊尼姆·里苏斯、康格·农、特里斯提克、康莫多·欧盟、梅特斯。
感谢您的清晰快速回答！我想知道-没有css文件可以完成吗？（标题中也没有）？我试着放浮子：对；宽度：30px英寸，但不工作。可能吗？@GuntisTreulands我刚刚更新了代码和演示，不使用样式表。谢谢你的回答-很好，很干净，很有帮助（标题中有脚本部分。）+1！（但我必须接受ThinkingStiff的答案，因为它提供了相同的答案，但速度更快。