删除两个flexbox项目之间的空间

debugcn 发表于 Dev

比特领主

我为Jobs构建了一个小部件，您应该在这里看到它。我只希望“位置”始终直接位于“描述”旁边。现在有很大的差距。

对齐项目：flex-start似乎不像本论坛中所述那样工作。边距：自动似乎也不起作用。没有命令使自己与上一个项目或其他内容对齐吗？我认为flexbox / css非常令人困惑并且过于复杂。感谢您的时间。

        .firstRow{

            width:100%;

            display: flex;

            flex-direction:row;
            
            flex-wrap:wrap;
            
            justify-content: space-between;
            
            align-content: flex-start;

        }       

 

        .Wrapper19 {

          border: 1px solid #dadada;

          display: flex;
          
          
          width:100%;

          align-items: center;

          padding:20px;

          box-shadow: 0 0 5px lightgrey;

          margin: 10px;

        }

        .SubWrapper19 {

          width:100%;

          display: flex;
          
          flex-direction:column;
          

        }
 

        .jobDescription19{

            width:100%;

            word-break: break-word;

            font-size: 150%;

        }

 

        .placeDescription19{

           width:49%;

            word-break: break-word;

            font-size: 100%;
            
            margin:auto;

        }

 

        .standortDescription19{
            
            margin:auto;

            width: 49%;

        }

        .linkText19{
            
            width:20%;
        justify-content: flex-end;
        
        
        }

<div class="Wrapper19">
   <div class ="SubWrapper19">
   <div class="jobDescription19">Job</div>
   <div class="firstRow">
    <p class="placeDescription19">Description</p><p class="standortDescription19" style="font-size:100%;">Place</p>
   </div>
   </div>
      <p style="font-size:110%;" class="linkText19">LinkText</p>
           <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='{{jobLink19.value}}'></a>
</div>

Panwen Wang

像这样？

        .firstRow{
            width:100%;
            display: flex;
            flex-direction:row;
            flex-wrap:wrap;
            /*justify-content: space-between;*/
            align-content: flex-start;
        }      

        .Wrapper19 {
          border: 1px solid #dadada;
          display: flex;
          width:100%;
          align-items: center;
          padding:20px;
          box-shadow: 0 0 5px lightgrey;
          margin: 10px;
        }

        .SubWrapper19 {
          width:100%;
          display: flex;
          flex-direction:column;
        }
 

        .jobDescription19{
            width:100%;
            word-break: break-word;
            font-size: 150%;
        }

        .placeDescription19{
           /*width:49%;*/
            word-break: break-word;
            font-size: 100%;
            /*margin:auto;*/
            
            /* add a little space*/
            padding-right: 5px;
        }

        .standortDescription19{
            /*margin:auto;*/
            /*width: 49%;*/
        }

        .linkText19{
            width:20%;
            justify-content: flex-end;
        }

<div class="Wrapper19">
   <div class ="SubWrapper19">
   <div class="jobDescription19">Job</div>
   <div class="firstRow">
    <p class="placeDescription19">Description</p><p class="standortDescription19" style="font-size:100%;">Place</p>
   </div>
   </div>
      <p style="font-size:110%;" class="linkText19">LinkText</p>
           <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='{{jobLink19.value}}'></a>
</div>

问题是，您所指定justify-content: space-between到.firstRow，并width: 49%; margin:auto;以.standortDescription19和.jobDescription19。这些将保持它们之间的差距。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。