Wie kann ich dafür sorgen, dass ein DIV die verbleibende Breite seines Containers ausfüllt, nachdem andere DIVs positioniert wurden?

Verbleibende Breite mit einem DIV füllen

Oft ist es notwendig, die verbleibende Breite eines Container-Divs auf ein anderes Div aufzuteilen. Im gegebenen Beispiel besteht das Ziel darin, dass „div2“ die verbleibende Breite ausfüllt, nachdem „div1“ und „div3“ ihren zugewiesenen Platz belegt haben.

Um dies zu erreichen, verwenden Sie das folgende CSS:

#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }

Erklärung:

• "divs" belegen natürlich 100 % ihrer Die Breite des Containers, sofern nicht ausdrücklich anders definiert.
• „div1“ und „div3“ erhalten feste Breiten und „float: left“ bzw. „float: right“, um sie auf beiden Seiten auszurichten.
• „div2“ wird im HTML nach „div3“ positioniert.
• „div2“ erhält linke und rechte Ränder entsprechend der Breite von „div1“ und „div3.“ Dadurch wird der Inhalt gezwungen, den verbleibenden Platz im Container einzunehmen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein DIV die verbleibende Breite seines Containers ausfüllt, nachdem andere DIVs positioniert wurden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!