Как я могу иметь два DIV на одной строке, один выровненный по левому краю и один по правому краю без таблицы HTML?

Question

Я хочу votediv справа, независимо от размера текста статьи с названием класса «note».что произойдет, если я назначу

<div class="votediv" style="right:0; position:relative">

на css?

<div class="opiniondiv">
        <article class="opinion"></article>
        <div class="opiniondetail">
          <article class="note"></article>
          <div class="votediv">
            <form method="POST">
              <button class="agreebutton" value="1">Agree</button>
              <button class="disagreebutton" value="0">Disagree</button>
            </form>
          </div>
        </div>
      </div>

также, я хочу сделать это без использования

display:table

Answer 1

Чтобы <div class="votediv" style="right:0"> работал, вы должны добавить position: absolute к стилю.И после этого вы, вероятно, захотите добавить position: relative к div.opiniondiv.

Edit

И если вы хотите использовать div, как это предлагают другие, пожалуйста, не забудьте очистить илиу вас будет полный беспорядок.

http://www.positioniseverything.net/easyclearing.html

Answer 2

Вы можете использовать float: left и float: right для перемещения элемента в эти стороны соответственно.

<style type='text/css'>
    .votediv { float: right; }
    .opiniondiv { float: left; }
</style>

Рабочий пример

Answer 3

<style>
    .votediv{
       float: right;
       width: 50%;
    }

    .opiniondiv{  
       float: left;
       width: 50%;
    }
</style>

Ширина 50% предполагает, что они находятся в одном родительском контейнере.Они должны иметь заданную ширину, чтобы это работало, и, очевидно, их объединенная ширина не должна быть шире, чем у их родителя.