Question

在下面的代码段中，我希望“ title” div可以根据其内容自行设置大小，因此不必指定宽度。该位显然已经在工作。然后，我希望“右侧” div占用剩余空间并使其自身右对齐-此刻它正好位于标题div旁边。

当然，我不想使用浮点数，因为这会弄乱所有内容，并且我们在这里没有使用浮点数的政策。

基于阅读其他线程的经验，我认为添加一个溢出：隐藏在其中一个父母中会使其执行此操作，但是我无法使其正常工作。

我不想为任何一个div指定宽度，但是通常情况下，其中一个父级会指定宽度，因此在这种情况下，我将其设置为“外部”元素。 / p>

那么，如何使“右侧”出现在红色框的右侧？谢谢

.outer {
  width:500px;
  border:1px solid red;
}

.outer div {
  display:inline-block;
  border:1px solid green;
}

.rightside {
  width:auto;
  text-align: right;
}

<div class="outer">
  <div class="inner">

    <div class="title">
      Autosize this section based on content
    </div>
    <div class="rightside">
      Right align this
    </div>
  </div>
</div>

Answer 1

您应该使用flexbox或grid轻松快速地解决此类问题

flex示例

.outer {
  width:500px;
  border:1px solid red;
 
}
.inner {
   display:flex;
  flex-direction:row;
  justify-content:space-between;
}
.outer div {
/*   display:inline-block; */
  border:1px solid green;
}

.rightside {
  width:auto;
  text-align: right;
}

<div class="outer">
  <div class="inner">

    <div class="title">
      Autosize this section based on content
    </div>
    <div class="rightside">
      Right align this
    </div>
  </div>
</div>

和网格

.outer {
  width:500px;
  border:1px solid red;
 
}
.inner {
  display:grid;
grid-template-columns: auto auto;
  grid-template-rows: auto;
  justify-content:space-between;
}
.outer div {
/*   display:inline-block; */
  border:1px solid green;
}

.rightside {
  width:auto;
  text-align: right;
}

<div class="outer">
  <div class="inner">

    <div class="title">
      Autosize this section based on content
    </div>
    <div class="rightside">
      Right align this
    </div>
  </div>
</div>

Answer 2

Flexbox会帮助您！

.outer {
  width: 500px;
  border: 1px solid red;
}

.outer .title,
.outer .rightside {
  display: inline-block;
  border: 1px solid green;
}

.inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<div class="outer">
  <div class="inner">

    <div class="title">
      Autosize this section based on content
    </div>
    <div class="rightside">
      Right align this
    </div>
  </div>
</div>

Answer 3

如果您希望右侧填充其余空间，可以使用flexbox和flex-grow，如下所示：

.inner {
  display: flex;
  justify-content: space-between;
}
.inner div {
  display:inline-block;
  border:1px solid green;
  width: auto;
  flex-grow: 1;
}
.rightside {
  width:auto;
  text-align: right;
}

Answer 4

使用 flexbox ，您只需将display: felx;设置为父元素，将margin-left: auto;设置为右侧（子）元素：

div {
  border: 2px dotted silver;
  padding: .5em;
}

/* ---------------- */

.parent {
  display: flex;
}

.rightside {
  margin-left: auto;
}

<div class="parent">
  <div>
    Child 1
  </div>
  <div class="rightside">
    Child 2
  </div>
</div>

自动将div大小和右对齐div放在同一div容器中

4 个答案: