css - 編集並べて表示されませんが、積み重ねられます

Question

私はHTML/CSSのコーディングに不慣れですが、これまでのところかなりよく理解しています。私はここ数時間、コードを並べて取得しようとしていましたが、常にスタックされたままです。私のコードは

<div class="api" style="float:left;">
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro"            target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png"   style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download  ROM Toolbox Pro from Google Play">
</a>
<div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>

そして私のCSSは、

.api {
margin: 0 auto; 
margin-top: 1em;
max-width: 700px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}

情報を並べて表示するために不足しているものを教えていただければ幸いです。他に指摘できるコードのクリーンアップがある場合は、それも素晴らしいことですが、必須ではありません。

編集：あなたのすべての助けてくれてありがとう、私はワトソンとピートの両方の答えを試しましたが、悲しいことに彼らはうまくいきません。コードなしとコードありのスクリーンショットをいくつか撮りました。あなたはここでそれらを見つけることができます、https：//dl.dropbox.com/u/11217802/sidebyside.png

私もそれを機能させることができましたが、インラインスタイリングをできるだけ避けようとしています<div>。この小さなプロジェクトには無意味なタグがあり、多すぎると思います。

<div class="api">
    <div>
        <td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
            <a rel="nofollow" href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" class="no_ul external" target="_blank">
                <img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:100%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
            </a>
        </td>
    </div>
    <div style="float: left;">
    <div class="appbrain-app">
        <a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
        </a>
    </div> 
        <script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
    </div>
</div>

CSSに関しては、それは私が最初に投稿したものから変わっていません。

もう一度ありがとうグレイディ

score 1 · Accepted Answer

これを試して：

.api a, .api div, .api img {
    float: left;
}

ヒント：コードをインデントして、次のように子ノードが親ノード内に収まるようにする必要があります。

<div>
    <a>Example</a>
    <img>
    <div>
        <a>Example</a>
    </div>
</div>

兄弟ノード（1つのタグが別のタグの内側にない場合）は、同じ量だけインデントする必要があります。

score 0 · Accepted Answer

コードを見ると、含まれているdivのみがフロートされており、その中のすべてのdivはブロック要素のままです。これらを並べて配置する場合は、次のいずれかを実行できます。

それらをインライン要素に変更します.api div {display:inline;}

それらをインラインブロック要素に変更します.api div {display:inline-block;}

それらを左に浮かせます .api div {float:left;}

編集

編集内容を確認し、jsfiddleでコードを試したところ、問題はjavascriptが多くの余分なdivを作成していることです。コードレイアウトを変更して、並べて表示します。

http://jsfiddle.net/xFu4Z/1/

html

<div class="api">
    <a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro"            target="_blank"><img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png"   style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download  ROM Toolbox Pro from Google Play" /></a>
</div>
<div class='appbrain-app'>
    <a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
    <script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>

CSS

.api,
.appbrain-app {float:left;}

.apiの幅と合計がそれらが入っているコンテナの幅を超えないようにする必要があることに注意してください.appbrain-app-元のスタイルで最大幅を700pxに設定していることに気づきました。これは、おそらく.appbrain-appdivを1行下にプッシュするつもりです

score 0 · Accepted Answer

マークアップを再構築しました：

<style>.api {
    margin: 0 auto; 
    margin-top: 1em;
    max-width: 700px;
    min-width: 300px;
    padding: 1em;
    background-color: #e2e2e2;
    border: 1px solid #C9C9C9;
    box-shadow: 0 0 2px #C9C9C9;
    -moz-box-shadow: 0 0 2px #C9C9C9;
    -webkit-box-shadow: 0 0 2px #C9C9C9;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: inline-block;
    }
    .appbrain-app { float: right; width: 48%; border: 1px solid red; }
    </style>
    <div class="api" style="float:left;">
        <div>
            <a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro"            target="_blank">
            <img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png"   style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download  ROM Toolbox Pro from Google Play">
            </a>
            <div class='appbrain-app'>
                <a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
                </a>
                <script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
            </div>
        </div>
    </div>

css - 編集並べて表示されませんが、積み重ねられます

3 に答える 3

Related

Reference