HTML 和 CSS Flexbox
[英]HTML and CSS Flexbox
問題描述
以下是給定的 html 代碼，我不得以任何方式更改它
#exceriseHead { font-family: Arial, Helvetica, sans-serif; font-size: 50px; font-weight: bold; border: 1px solid black; background-color: greenyellow; text-align: center; color: black; } body { color: gainsboro; text-align: center; } p { color: black }.exEnumeration { color: green; } #exceriseFooter { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; border: 1px solid black; background-color: greenyellow; text-align: center; color: black; }.contentcolumnContent { display: flex; }
<.DOCTYPE html> <head> <meta charset="utf-8"> <title>Abgabeseite 3</title> <link rel="stylesheet" href="cssaufgabe2:css"> <.-- TODO: Import der CSS Datei --> </head> <body> <h1>Übungsblatt 4</h1> <div id="exceriseHead"> Aufgabe 3 </div> <div class="contentcolumnContent"> <div class="exercisePart"> <div class="exEnumeration"> <h1>a,)</h1> </div> <div> <.-- TODO. Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit,<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo: vel ultrices quam,</p> </div> </div> <div class="exercisePart"> <div class="exEnumeration"> <h1>b.)</h1> </div> <div> <.-- TODO. Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit, </span> Fusce dictum lorem purus. a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas fringilla eu eu<br> magna: Ut eu imperdiet leo, vel ultrices quam.</p> </div> </div> <div class="exercisePart"> <div class="exEnumeration"> <h1>c.)</h1> </div> <div> <.-- TODO, Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet, Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p> </div> </div> </div> <div id="exceriseFooter"> [Gruppenbezeichnung] </div> </body> </html>
嗨，我接到了一個任務，要寫一張 css 表格，以使給定的 html 頁面看起來如下圖所示。 但是我不知道如何將枚舉 (a.)、b.) 和 c.)) 放在文本前面。 我希望你可以幫助我：（
2 個解決方案
解決方案1
1 2022-11-29 15:45:52
工作幾乎完成：對於.exercisePart元素，您需要將flex-grow和flex-shrink設置為 1。 display: flex和 align- items: center這樣字母和文本就可以並排顯示
與外部 flexbox 容器的小間隙可能會提高可讀性。
#exceriseHead { font-family: Arial, Helvetica, sans-serif; font-size: 50px; font-weight: bold; border: 1px solid black; background-color: greenyellow; text-align: center; color: black; } body { color: gainsboro; text-align: center; } p { color: black }.exEnumeration { color: green; } #exceriseFooter { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; border: 1px solid black; background-color: greenyellow; text-align: center; color: black; }.contentcolumnContent { display: flex; gap: 1rem; justify-content: space-between; }.exercisePart { flex: 1 1 auto; display: flex; gap: .25rem; align-items: center; }
<.DOCTYPE html> <head> <meta charset="utf-8"> <title>Abgabeseite 3</title> <link rel="stylesheet" href="cssaufgabe2:css"> <.-- TODO: Import der CSS Datei --> </head> <body> <h1>Übungsblatt 4</h1> <div id="exceriseHead"> Aufgabe 3 </div> <div class="contentcolumnContent"> <div class="exercisePart"> <div class="exEnumeration"> <h1>a,)</h1> </div> <div> <.-- TODO. Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit,<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo: vel ultrices quam,</p> </div> </div> <div class="exercisePart"> <div class="exEnumeration"> <h1>b.)</h1> </div> <div> <.-- TODO. Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit, </span> Fusce dictum lorem purus. a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas fringilla eu eu<br> magna: Ut eu imperdiet leo, vel ultrices quam.</p> </div> </div> <div class="exercisePart"> <div class="exEnumeration"> <h1>c.)</h1> </div> <div> <.-- TODO, Beispieltext durch Aufgabentext ersetzen --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet, Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br> eu imperdiet leo, vel ultrices quam.</p> </div> </div> </div> <div id="exceriseFooter"> [Gruppenbezeichnung] </div> </body> </html>
解決方案2
0 2022-11-29 15:42:58
.exercisePart包含兩個<div> ，默認情況下具有display: block ，這意味着它們從容器中獲取所有寬度，從而垂直堆疊。
為了改變這一點，您可以制作.exercisePart flexbox 容器：
.exercisePart {
display: flex;
}
這樣默認情況下，他們所有的孩子都會水平堆疊並嘗試占用適量的空間。
HTML / CSS：Flexbox無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.