Css “编辑”不会并排显示，而是堆叠显示

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

如果你能告诉我我错过了什么，以便获得并排显示的信息，我将不胜感激。如果您有任何其他代码清理，您可以指出，这将是伟大的，但不是必要的

编辑： 谢谢你们的帮助，伙计们，我试过沃森和皮特的答案，但遗憾的是他们都不起作用。我拍了一些没有代码和代码的截图。你可以在这里找到它们

我也能够让它工作，但我正试图避免尽可能多的内联样式，我相信对于这个小项目，我有无意义的标记和太多的

<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，这与我最初发布的内容没有改变

再次感谢Grady

试试这个：

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

提示：您应该缩进代码，使子节点位于父节点内，如：

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

例子
例子

---

同级节点（当一个标记不在另一个标记内时）的缩进量应相同。

查看您的代码，您只浮动了包含的div，其中的所有div仍然是块元素，如果希望它们并排排列，可以执行以下操作之一：

将它们更改为内联元素

.api div{display:inline；}

将它们更改为内联块元素

.api div{display:inline block；}

将它们向左浮动

.api div{float:left；}

编辑

在查看了您的编辑并在JSFIDLE中尝试了您的代码之后，问题在于javascript正在创建大量额外的div。我已更改了您的代码布局，以使内容并排：

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>

---

请注意，您需要确保添加在一起的

.api

和

.appbrain app

的宽度不超过它们所在容器的宽度-我刚刚注意到，在您的原始样式上，您设置了700px的最大宽度，这意味着它可能会将

.appbrain app

向下推一个分区行

我重新构造了您的标记：

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

.api{
保证金：0自动；
边缘顶部：1米；
最大宽度：700px；
最小宽度：300px；
填充：1em；
背景色：#E2；
边框：1px实心#C9C9C9；
盒影：0 0 2px#C9C9C9；
-moz盒阴影：0 0 2px#C9C9C9；
-webkit盒阴影：0 0 2px#C9C9C9；
边界半径：3px；
-moz边界半径：3px；
-khtml边界半径：3px；
-webkit边界半径：3px；
显示：内联块；
}
.appbrain应用程序{浮点：右；宽度：48%；边框：1px纯红色；}

用一个关于JSFIDDLEWERKS的例子更新了我的答案！多谢各位。

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

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