如何在同一行上有两个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>

工作实例