css如何制作两个div并排

I have this htmll

我有这个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>

I don't have css classes.

我没有CSS课程。

this is the results

这是结果

I need the green div to be side by side with the red one.

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

how please?

this is my code

这是我的代码

http://jsfiddle.net/Tn58S/

3 个解决方案

#1

Put all the content within a container DIV with a width sufficient to hold both portlet DIVs, i.e. with a width of 956px as each of your portlet DIVS contains a CANVAS with a width of 478px. So:

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

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

See this jsfiddle example

看到这个jsfiddle示例

After checking the full code provided in your jsfiddle, I recommend the following changes:

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

• chartsclass needs to be wide enough to contain its content, which is 958px. So add a max-width of 958px to this class.

chartclass需要足够宽以包含其内容,即958px。因此,为此类添加最大宽度为958px。

• As you have also set chartsclass to a width of 80%, this means that the width of contentArea, which contains chartsclass and informationClass, needs to be a minimum of 1198px, as 958 is 80% of 1198.

由于您还将chartclass设置为80%的宽度,这意味着contentArea的宽度(包含chartclass和informationClass)需要至少为1198px,因为958是1198的80%。

• As informationClass is set to 20%, it needs to be set to a maximum width of 240px.

由于informationClass设置为20%,因此需要将其设置为最大宽度240px。

• As the logoArea needs to be a width of 100%, remove the float: left so that it remains as a block level element.

由于logoArea的宽度必须为100%,因此请删除float:left,使其保持为块级元素。

I've updated your jsfiddle

我已经更新了你的jsfiddle

#2

Just change

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

to

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

and make sure to resize the window to make room for both divs.

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

#3

Set the widths of the main divs to be 50%

将主div的宽度设置为50%

http://jsfiddle.net/yaHwj/

width:50%