Выравнивание div влево и вправо

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

Try ниже код head:

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 2

Набор поплавков для каждого DIV с помощью CSS: example

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

Answer 3

Вы должны использовать поплавки:

<style> 

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

</style> 

Если вы хотите, как в разных ширинах, просто отделить CSS селекторов и добавьте требуемую ширину.

PS: Избегайте использования встроенного CSS, если вам не нужно, передать их в отдельный файл CSS и включить его в разделе

Answer 4

Вы можете использовать twitter bootstrap css для стилизации ваших div. Просто добавьте class="col-xs-6" в каждый div. Помните, что class="col-xs-12" - это полная ширина, которую может принимать div в зависимости от ширины родительского контейнера. Использование -xs- вместо -md- сжимает div при изменении размера вместо того, чтобы сбить их. Если вы хотите, чтобы поля просто добавляли, измените их на col-xs-5 s, затем добавьте div col-xs-2. Также рекомендуется использовать родительские divs с container-fluid и row классы