CSS - Hintergrundfarbe Ein Flexbox Grid - Spaltenlayout - Obere Reihe, erste Spalte

Hier ist der Link zum codepen: enter link description here CSS - Hintergrundfarbe Ein Flexbox Grid - Spaltenlayout - Obere Reihe, erste Spalte

ich die Hintergrundfarbe der oberen Reihe und der ersten Spalte ändern möchten.

Siehe die beigefügten codepen für die CSS und HTML.

Ich tue aber die blau über die gesamte Zeile wird nicht gehen.

.Grid { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    word-wrap: break-word !important; 
 
} 
 
.Grid-column { 
 
    //flex: 1; 
 
    flex-grow: 1; 
 
    padding:0; 
 
    flex-direction: column; 
 
    word-wrap: break-word !important; 
 
    
 
} 
 
.Grid-cell { 
 
    width: 100%; 
 
    flex: 1; 
 
    word-wrap: break-word !important; 
 
    min-width: 50%; 
 
\t padding:0 1em; 
 
\t box-sizing:border-box; 
 
} 
 
.Grid-cell:nth-child(2n+1) { 
 
    background: lightgray; 
 
    word-wrap: break-word !important; 
 
} 
 

 
.Grid-row:first-child { 
 
    background:dodgerblue; 
 
    font-weight: bold; 
 

 
} 
 

 
.Grid-cell:first-child { 
 
    background: dodgerblue; 
 
    font-weight: bold; 
 
\t \t padding-top:1em; 
 
} 
 
.Grid-cell:first-child { 
 
    background: dodgerblue; 
 
    font-weight: bold; 
 
}

<div id=event-history-view> 
 
    <div class="Grid"> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">1Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">2Change Date</div> 
 
      <div class="Grid-cell">2Brief Descriptionasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</div> 
 
      <div class="Grid-cell">2Description</div> 
 
      <div class="Grid-cell">2Commentary</div> 
 
      <div class="Grid-cell">2Severity Name</div> 
 
      <div class="Grid-cell">2Ticker Type Name</div> 
 
      <div class="Grid-cell">2Disclosure Code</div> 
 
      <div class="Grid-cell">2Disclosure Name</div> 
 
      <div class="Grid-cell">2Status Name</div> 
 
      <div class="Grid-cell">2Category Name</div> 
 
      <div class="Grid-cell">2Publish Mode Name</div> 
 
      <div class="Grid-cell">2Agreement Date</div> 
 
      <div class="Grid-cell">2Deletion Reason</div> 
 
      <div class="Grid-cell">2Updated By</div> 
 
      <div class="Grid-cell">2Event Approval Status Name</div> 
 
      <div class="Grid-cell">2Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">2Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">2Event Approval Comments</div> 
 
      <div class="Grid-cell">2Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">3Change Date</div> 
 
      <div class="Grid-cell">3Brief Description</div> 
 
      <div class="Grid-cell">2Description</div> 
 
      <div class="Grid-cell">3Commentary</div> 
 
      <div class="Grid-cell">3Severity Name</div> 
 
      <div class="Grid-cell">3Ticker Type Name</div> 
 
      <div class="Grid-cell">3Disclosure Code</div> 
 
      <div class="Grid-cell">3Disclosure Name</div> 
 
      <div class="Grid-cell">3Status Name</div> 
 
      <div class="Grid-cell">3Category Name</div> 
 
      <div class="Grid-cell">3Publish Mode Name</div> 
 
      <div class="Grid-cell">3Agreement Date</div> 
 
      <div class="Grid-cell">3Deletion Reason</div> 
 
      <div class="Grid-cell">3Updated By</div> 
 
      <div class="Grid-cell">3Event Approval Status Name</div> 
 
      <div class="Grid-cell">3Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">3Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">3Event Approval Comments</div> 
 
      <div class="Grid-cell">3Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-column"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2017-05-22 Michael JDI

Dieses: 'div.Grid-Reihe {padding: 0;} 'wird es überspannen, aber ich bin mir nicht sicher, dass das ist, was Sie suchen. – blackandorangecat

Frage: Wie kann ich jede Zelle so anpassen, dass sich die X-Achse (Zeilen) dynamisch an den Text anpasst. Beachten Sie, dass der Text 2Brief Beschreibungasdfasdf länger ist und die Höhe dieser Zelle höher ist. Vielen Dank! –

etwas, das es nicht richtig mit Ihrem Layout ist.

Sie sagen: grid-row aber Sie es als Spalten verwenden. Die Grid-cell haben nichts mit Spalten zu tun, sie sind nur zufällige divs innerhalb der Spalte mit der Klasse grid-row.

sagen I want to change the background color of the top row Sie beziehen sich nicht auf eine Zeile in der html. gibt es nicht eine

i Sie erraten, bedeuten, dass Sie alle ersten grid-cell s wollen Hintergrund blau haben. Daher müssen Sie die Polster aus den grid-row Spalten entfernen und diese stattdessen zu .grid-cell hinzufügen.

siehe Schnipsel unten oder jsFiddle

// .grid { 
 
// border: solid 1px #e7e7e7; 
 
// } 
 

 
// .grid__row { 
 
// display: flex; 
 
// background: whitesmoke; 
 
// } 
 

 
// .grid__item { 
 
// flex: 1; 
 
// padding: 12px; 
 
// border: solid 1px #e7e7e7; 
 
// } 
 

 
.Grid { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    word-wrap: break-word !important; 
 
} 
 
.Grid-row { 
 
    //flex: 1; 
 
    flex-grow: 1; 
 
    padding:0; 
 
    flex-direction: column; 
 
    word-wrap: break-word !important; 
 
    
 
} 
 
.Grid-cell { 
 
    width: 100%; 
 
    flex: 1; 
 
    word-wrap: break-word !important; 
 
    min-width: 50%; 
 
\t padding:0 1em; 
 
\t box-sizing:border-box; 
 
} 
 
.Grid-cell:nth-child(2n+1) { 
 
    background: lightgray; 
 
    word-wrap: break-word !important; 
 
} 
 

 
.Grid-row:first-child { 
 
    background:dodgerblue; 
 
    font-weight: bold; 
 

 
} 
 

 
.Grid-cell:first-child { 
 
    background: dodgerblue; 
 
    font-weight: bold; 
 
\t \t padding-top:1em; 
 
} 
 
.Grid-cell:first-child { 
 
    background: dodgerblue; 
 
    font-weight: bold; 
 
}

<div id=event-data> 
 
    Event Data Info Goes Here 
 

 
</div> 
 

 
<div id=event-history-view> 
 
    <div class="Grid"> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">1Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">2Change Date</div> 
 
      <div class="Grid-cell">2Brief Description</div> 
 
      <div class="Grid-cell">2Description</div> 
 
      <div class="Grid-cell">2Commentary</div> 
 
      <div class="Grid-cell">2Severity Name</div> 
 
      <div class="Grid-cell">2Ticker Type Name</div> 
 
      <div class="Grid-cell">2Disclosure Code</div> 
 
      <div class="Grid-cell">2Disclosure Name</div> 
 
      <div class="Grid-cell">2Status Name</div> 
 
      <div class="Grid-cell">2Category Name</div> 
 
      <div class="Grid-cell">2Publish Mode Name</div> 
 
      <div class="Grid-cell">2Agreement Date</div> 
 
      <div class="Grid-cell">2Deletion Reason</div> 
 
      <div class="Grid-cell">2Updated By</div> 
 
      <div class="Grid-cell">2Event Approval Status Name</div> 
 
      <div class="Grid-cell">2Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">2Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">2Event Approval Comments</div> 
 
      <div class="Grid-cell">2Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">3Change Date</div> 
 
      <div class="Grid-cell">3Brief Description</div> 
 
      <div class="Grid-cell">2Description</div> 
 
      <div class="Grid-cell">3Commentary</div> 
 
      <div class="Grid-cell">3Severity Name</div> 
 
      <div class="Grid-cell">3Ticker Type Name</div> 
 
      <div class="Grid-cell">3Disclosure Code</div> 
 
      <div class="Grid-cell">3Disclosure Name</div> 
 
      <div class="Grid-cell">3Status Name</div> 
 
      <div class="Grid-cell">3Category Name</div> 
 
      <div class="Grid-cell">3Publish Mode Name</div> 
 
      <div class="Grid-cell">3Agreement Date</div> 
 
      <div class="Grid-cell">3Deletion Reason</div> 
 
      <div class="Grid-cell">3Updated By</div> 
 
      <div class="Grid-cell">3Event Approval Status Name</div> 
 
      <div class="Grid-cell">3Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">3Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">3Event Approval Comments</div> 
 
      <div class="Grid-cell">3Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
     <div class="Grid-row"> 
 
      <div class="Grid-cell">Change Date</div> 
 
      <div class="Grid-cell">Brief Description</div> 
 
      <div class="Grid-cell">Description</div> 
 
      <div class="Grid-cell">Commentary</div> 
 
      <div class="Grid-cell">Severity Name</div> 
 
      <div class="Grid-cell">Ticker Type Name</div> 
 
      <div class="Grid-cell">Disclosure Code</div> 
 
      <div class="Grid-cell">Disclosure Name</div> 
 
      <div class="Grid-cell">Status Name</div> 
 
      <div class="Grid-cell">Category Name</div> 
 
      <div class="Grid-cell">Publish Mode Name</div> 
 
      <div class="Grid-cell">Agreement Date</div> 
 
      <div class="Grid-cell">Deletion Reason</div> 
 
      <div class="Grid-cell">Updated By</div> 
 
      <div class="Grid-cell">Event Approval Status Name</div> 
 
      <div class="Grid-cell">Event Approval Commentary Approved</div> 
 
      <div class="Grid-cell">Event Approval Needs Secondary Approval</div> 
 
      <div class="Grid-cell">Event Approval Comments</div> 
 
      <div class="Grid-cell">Event Approval Updated By</div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    <label class="error" *ngIf="error">Error Loading Data {{" " + errorMessage}}</label> 
 
</div>

, aber ich schlage vor, Sie Ihr Layout entsprechend Ihren Anforderungen

Quelle

2017-05-22 14:11:51

CSS - Hintergrundfarbe Ein Flexbox Grid - Spaltenlayout - Obere Reihe, erste Spalte

Antwort

Verwandte Themen