Question

在下面的代码中，我有两个<div>标签。我想将一个<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>

Answer 1

使用CSS设置每个div的浮点数： example

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

Answer 2

你应该使用浮动：

<style>

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

</style>

如果你想要两个不同的宽度，只需分开css选择器并添加所需的宽度。

PS：除非您需要，否则请避免使用内联CSS，将这些内容传输到单独的CSS文件并将其包含在head部分

中

Answer 3

尝试以下代码：

<强> Demo

<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>

Answer 4

你可以使用twitter bootstrap css来设置div的样式。只需将class="col-xs-6"添加到每个div即可。记住class="col-xs-12"是div可以根据父容器的宽度采取的全宽。使用-xs-而不是-md-在调整大小时收缩div而不是将它们击倒。如果您想要边距，只需将其更改为col-xs-5 s，然后在其间添加col-xs-2 div。使用container-fluid和row类的父div也是一种很好的做法

左右对齐div

4 个答案: