如何在同一行上有兩個DIV，一個不帶HTML表格，一個左對齊，一個右對齊？

Question

我想要的是表決分隔符，而與類別名稱為“ 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 。

編輯

而且，如果您要像其他人建議的那樣使div浮動，請不要忘記清除，否則您將一團糟。

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

Answer 2

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

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

50％的寬度假定它們都在同一個父容器中。 它們需要具有一個固定的寬度才能正常工作，並且顯然，它們的組合寬度不得大於其父級。

Answer 3

您可以使用float: left和float: right分別將元素浮動到那些邊。

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

工作實例