css如何制作两个div并排

Question

我有这个htmll

<div class="portlet" style="background-color: red; float:left">
                    <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课程。

这是结果

我需要绿色div与红色div并排。

怎么样？

这是我的代码

http://jsfiddle.net/Tn58S/

Answer 1

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

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

请参阅此jsfiddle example

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

• chartsclass需要足够宽以包含其内容，即958px。因此，为此类添加最大宽度为958px。
• 由于您还将chartclass设置为80％的宽度，这意味着contentArea的宽度（包含chartclass和informationClass）必须至少为1198px，因为958是1198的80％。
• 由于informationClass设置为20％，因此需要将其设置为最大宽度240px。
• 由于logoArea的宽度必须为100％，因此请移除float：left，使其保持为块级元素。

我已更新您的jsfiddle

Answer 2

只需更改

<div class="portlet" style="background-color:green; float:right; ">

到

<div class="portlet" style="background-color:green; float:left; ">

并确保调整窗口大小以便为两个div腾出空间。

Answer 3

将主div的宽度设置为50％

http://jsfiddle.net/yaHwj/

width:50％