2

私は現在、AddThis Div ボタンをフォーマットするテーブルの「解決策」を持っています。これは、 http ://www.siding4u.com/save-on-siding.php で確認できます。

ページの上部に正しく表示されます。 画像の右側にフォーマットされ、ページの上部にオフセットされた AddThis ボタン

そのためのコード（回避策）は次のとおりです。

<table align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%" align="right"><img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23" /></td>
    <td width="40%" align="left"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=siding4u"></script>
<!-- AddThis Button END --></td>
  </tr>
</table>

すべてのテーブル レイアウトを CSS に変換したい/したいのですが、AddThis ボタンを連携させることができないようです。それらは常に「LEFT JUSTIFY」またはBREAKのように見えます-私が何をしようとしても。

これは簡単に修正できると思いますが、私は、CSS をうまく形にすることができない CSS の「ブロック ヘッド」の 1 人です。

助けてください...

4

1 に答える 1

3

cssでは、画像の位置合わせは、位置合わせではなくページ上の位置に基づいています（クラスaddthis_button_preferred_1...nを持つ要素がおそらくこれを制御する必要があります）。テーブルでは、左/中央/右などで位置合わせしますが、CSSでは、位置合わせを目的としています。子要素が真ん中にあるように。

HTML： 

<div id='wrapper'> <!-- parent div containing the help-us-help-you image and the buttons-->
    <div id="help_us"><!-- float:left because we want the image div and the button dive to be besides eachother -->
        <img title="Help us. Help you." src="http://www.siding4u.com/media/shareaholic/img_help-us-help-you_right_yellow-text.png" alt="TEXT: Sharing is caring! Help us. Help you." width="360" height="23"/>
    </div>
    <div id='buttons'><!-- this div should also be floated left and have padding, to align the buttons correctly -->

        <!-- each of the link elements should get some padding -->
        <a class="addthis_button_preferred_1 button_preferred"></a>
        <a class="addthis_button_preferred_2 button_preferred"></a>
        <a class="addthis_button_preferred_3 button_preferred"></a>
        <a class="addthis_button_preferred_4 button_preferred"></a>
        <a class="addthis_button_compact button_preferred"></a>
        <a class="addthis_counter addthis_bubble_style button_preferred"></a>
    </div>
</div>

例全体がこのフィドルでオンラインになっており、うまくいけばアライメントに役立つはずであり、純粋なCSSソリューションであり、テーブルはまったくありません！

ps補足として、CSS / HTML / javascriptの問題にはjsfiddleを使用することをお勧めします。これは、問題をよりよく理解し、変更をより迅速に行うのに役立ちます。

編集 2番目の問題の場合：

<div align="center" style="margin-bottom:0; margin-top:5px;"> 
<div id='wrapper'> 
...
​&lt;/div>
...
</div>

この要素の場合、何らかの理由で高さが48ピクセルになり、2つの要素の間にギャップが生じます。したがって、それに高さを適用し、変更します。

style="margin-bottom:0; margin-top:5px;"

に：

style="margin-bottom:0; margin-top:5px;height:23px;"

于 2012-07-14T00:15:36.663 に答える