自動將div大小和右對齊div放在同一div容器中

Question

在下面的代碼段中，我希望“ title” div能夠根據其內容自行調整大小，因此不必指定寬度。 該位顯然已經在工作。 然后，我希望“右側” div占用剩余空間並使其自身右對齊-此刻它正好位於標題div旁邊。

當然，我也不想使用浮點數，因為這會弄亂所有內容，並且我們在這里制定了不浮點數政策。

基於閱讀其他線程，我認為添加一個溢出：隱藏在其中一個父母中會使其執行此操作，但我無法使其正常工作。

我不想為任何一個div指定寬度，但總是會有一個父母指定寬度的情況，因此在這種情況下，我將其設置為“外部”元素。

那么，如何使“右側”出現在紅色框的右側？ 謝謝

 .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輕松快速地解決此類問題

例子

 .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>