通過div對齊專案2/3？

我在反應中有以下代碼：

.alignHorizontally {
  display: flex;
}

.firstTitle {
  align-items: center;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}

.secondTitle {
  margin-left: 80px;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}


/* added by editor for demonstration purpose */
.alignHorizontally > * {
  box-sizing: border-box;
}

.firstTitle { 
  border: 2px dashed red;
}

.secondTitle { 
  border: 2px dashed blue;
}

<div class="alignHorizontally">
  <div class="firstTitle">Title
  </div>
  <div class="secondTitle">
    Second title
  </div>
</div>

我希望第一個 div(firstTitle) 位于最左側，第二個 div (secondTitle) 大約是螢屏的 2/3。我知道我可以通過添加來強制執行此操作，padding-left: 100px但感覺很難看。有這樣做的好方法嗎？

uj5u.com熱心網友回復：

您也可以justify-content: space-between在您的alignHorizo??ntally類中使??用，或嘗試任何其他與您想要的布局最匹配的 justify-content 引數。

.alignHorizontally {
    display: flex;
    justify-content: space-between;
  }
  
  .firstTitle {
    align-items: center;
    display: flex;
    margin-top: 16px;
    word-spacing: 2px;
    line-height: 1;
  }
  
  .secondTitle {
    margin-left: 80px;
    display: flex;
    margin-top: 16px;
    word-spacing: 2px;
    line-height: 1;
  }
  
  
  /* added by editor for demonstration purpose */
  .alignHorizontally > * {
    box-sizing: border-box;
  }
  
  .firstTitle { 
    border: 2px dashed red;
  }
  
  .secondTitle { 
    border: 2px dashed blue;
  }

<div class="alignHorizontally">
        <div class="firstTitle">Title
        </div>
        <div class="secondTitle">
            Second title
        </div>
    </div>

它不是英文的，但它是迄今為止我見過的關于將專案與 CSS 網格對齊的最好的教程。

Alura 的示例 justify-content CSS 網格

https://www.alura.com.br/artigos/css-guia-do-flexbox

uj5u.com熱心網友回復：

1. 添加.secondTitle { width: 33%; }到占用 1/3 的空間，這意味著它將占用 1/3 的空間。
2. 你可以把margin-left: auto它推到右邊，占據右邊空間的 1/3。

或者，您可以直接為第一個 div 設定 66% 的寬度。

/* original CSS */
.alignHorizontally {
  display: flex;
}

.firstTitle {
  align-items: center;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}

.secondTitle {
  margin-left: 80px;
  display: flex;
  margin-top: 16px;
  word-spacing: 2px;
  line-height: 1;
}


/* CSS Chanegs !!! */
.secondTitle {
  width: 33%;
  margin-left: auto;
}


/* added by editor for demonstration purpose */
.alignHorizontally > * {
  box-sizing: border-box;
}

.firstTitle { 
  border: 2px dashed red;
}

.secondTitle { 
  border: 2px dashed blue;
}

<div class="alignHorizontally">
  <div class="firstTitle">Title
  </div>
  <div class="secondTitle">
    Second title
  </div>
</div>

uj5u.com熱心網友回復：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; // setting three columns in our grid layout

}

.grid-item2 {
  grid-column-start: 3; // setting second div to start and end in 3d column
  grid-column-end: 3;
}

<div class="grid-container">
 <div class="grid-item1">Title #1</div>
 <div class="grid-item2">Title #2</div>
</div>

標籤：html css

上一篇：如何制作具有2種狀態的按鈕，單擊時根據狀態觸發不同的功能

下一篇：不是所有的html都可以在pythion-requests-html中訪問