对齐项目2/3到div？

Question

我有以下代码：

​

.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 3rds。我知道我可以通过添加padding-left: 100px来强制这样做，但感觉很难看。有什么好办法吗？

Answer 1

您还可以在您的justify-content: space-between类中使用alignHorizontally，也可以尝试任何其他与所需布局最接近的合理内容参数。

​

.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的例子证明了CSS网格的内容

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

Answer 2

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>

​

Answer 3

​

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

​