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

如果你告诉我我缺少什么，以便将信息并排显示，我将非常感激。如果您有任何其他代码清理，您可以指出这也很好但不需要。

编辑：谢谢你所有的帮助，我已经尝试了Watson和Pete的答案，但遗憾的是他们没有工作。我在没有您的代码和代码的情况下截取了一些截图。你可以在这里找到它们，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而言，这并没有改变我发布的内容。

再次感谢Grady

Answer 1

试试这个：

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

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

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

兄弟节点（当一个标签不在另一个标签内时）应该缩进相同的数量。

Answer 2

查看你的代码，你只浮动包含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-app div推到一行

Answer 3

我重新构建了你的标记：

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

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

3 个答案: