2

状況は単純です。2 つのインライン オブジェクト (画像付きのボタン) の周りにテキストをラップする必要がありますが、これらのボタンは (横に並べてではなく) 2 行に配置する必要があります。

問題は、必要なボタンが非常に小さい (画面の幅の半分未満) ことです。そのため、ボタンが 1 行に並んでいます。

これが私が今得たものです：

ここに画像の説明を入力

そして、ここに私が達成しようとしているものがあります:

ここに画像の説明を入力

そして、ここに私が実験しているコードがあります:

<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 は使用できません。
  • ボタンの間に新しい行を入力すると、テキストは 2 番目のボタンの周りだけで折り返され始めます。
  • 両方のボタンの間に少しテキストを追加する可能性がありますが、フォントが変更される可能性があることなどを念頭に置いて、メインテキストからどのくらいのテキストを切り取るかを正確に計算する必要があります.

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 に答える