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。

修改

如果你像其他人在这里所说的那样漂浮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>

Working Example

如何在同一行上有两个DIV，一个在左边对齐，另一个在没有HTML表的情况下与右边对齐？

3 个答案:

修改