Html 将div左右对齐

在下面的代码中，我有两个

标记。我想将一个

向左对齐，另一个向右对齐，高度和宽度相同。请帮我做这个

<div id="imgShow">
    <panel>
        <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
        <div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
            <canvas id = "drawing" height="1500" width="1200" >  
                <p>Canvas not supported</p>
            </canvas>
        </div>
    </panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>

不支持画布

使用CSS设置每个div的浮动：

.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}

<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
    <panel>
        <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
        <div id="ScrollImg">
            <canvas id = "drawing" height="1500" width="1200" >  
                <p>Canvas not supported</p>
            </canvas>
        </div>
    </panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>

您应该使用浮动：

<style>

#imgShow, #divComplete{
    float:left;
    width:50%;
}

</style>

#imgShow，#divComplete{
浮动：左；
宽度：50%；
}

如果您想要两者都具有不同的宽度，只需分离css选择器并添加所需的宽度

注意：除非您需要，否则不要使用内联CSS，将它们传输到单独的CSS文件中，并将其包含在

标题

部分

尝试以下代码：

.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}

<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
    <panel>
        <img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
        <div id="ScrollImg">
            <canvas id = "drawing" height="1500" width="1200" >  
                <p>Canvas not supported</p>
            </canvas>
        </div>
    </panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>

不支持画布

不支持画布

您可以使用twitter引导css来设置div的样式。只需将

class=“col-xs-6”

添加到每个div。请记住

class=“col-xs-12”

是div根据父容器的宽度可以采用的全宽。使用-xs-而不是-md-在调整div的大小时收缩div，而不是将其击倒。如果您想添加边距，只需将其更改为

col-xs-5

s，然后在两者之间添加

col-xs-2

div。将父div与

容器流体

和

行

类一起使用也是一种很好的做法，css在哪里？你想在左边和右边使用哪个div？@Era我只在html中使用css。你正在为两个div使用

position:relative

，如果你想从

left:-1px

和

right:-1px

分别定位，请将它们更改为

position:absolute

。有三个div标记，所以，要对齐哪两个？@GauravRai ScrollImg和divcomplete div如果我增加它移动的宽度divcomplete div向下移动两个div的宽度相同（50%）我将两个div增加到100%bcoz 50%很小，然后一个div下来不可能并排坐两个100%div谢谢你的回答实际上非常好的解决方案+1。谢谢你的回答。