0

我是编码 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 而言，这与我最初发布的内容并没有什么不同。

再次感谢格雷迪

4

3 回答 3

1

尝试这个：

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

和一个提示：你应该缩进你的代码，所以子节点在父节点内，比如：

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

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

于 2013-02-28T16:29:13.790 回答
0

我重组了你的标记：

<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>
于 2013-02-28T16:42:48.120 回答
0

查看您的代码，您只浮动了包含 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 往下推

于 2013-02-28T16:38:06.453 回答