html - 如何让两个div并排放置

Question

我有这个html

                        <div class="portlet-header" style="width: 447px">
                            <h3>Total Calls Statuses</h3>
                        </div>
                        <div id="vertical-chart-total-calls-statuses" class="chart-holder">
                            <canvas class="overlay" width="478" height="300"></canvas>
                        </div>
                    </div>


                    <div class="portlet" style="background-color:green; float:right; ">
                        <div class="portlet-header" style="width: 447px">
                            <h3>Inbound</h3>
                        </div>
                        <div id="vertical-chart" class="chart-holder">
                            <canvas class="overlay" width="478" height="300"></canvas>
                        </div>
                    </div>

我没有任何 CSS，但我有 HTML。这是我的代码的当前结果: http://i.stack.imgur.com/mFEO3.png我需要绿色 div 与红色 div 并排放置，我该怎么做？这是一个 JSFiddle: http://jsfiddle.net/Tn58S/

Answer 1

将所有内容放在一个宽度足以容纳两个 portlet DIV 的容器 DIV 中，即宽度为 956px，因为每个 portlet DIVS 都包含一个宽度为 478px 的 CANVAS。所以:

<div style="width: 956px"><!-- your content here --></div>

查看此 jsfiddle example

在检查了您的 jsfiddle 中提供的完整代码后，我建议进行以下更改:

• chartsclass 需要足够宽以包含其内容，即 958px。所以给这个类添加一个 958px 的最大宽度。
• 由于您还将 chartsclass 的宽度设置为 80%，这意味着包含 chartsclass 和 informationClass 的 contentArea 的宽度需要至少为 1198px，因为 958 是 1198 的 80%。
• 由于 informationClass 设置为 20%，因此需要将其设置为最大宽度 240px。
• 由于 logoArea 的宽度需要为 100%，因此移除 float: left，使其保持为 block 级元素。

我已经更新了你的 jsfiddle