finish 04 floats flex and css grid

张欧文 · 张欧文 · commit 838a4f6d165f · 2022-11-09T15:36:06.000+08:00
diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html
@@ -10,45 +10,44 @@
   <div class="container clearfix">
     <body>
       <article>
-        <h2>Converse Chuck Taylor All Star Low Top</h2>
-        <div class="row">
-          <img
-            class="part0"
-            src="img/challenges.jpg"
-            width="240px"
-            height="240px"
-            alt="图片炸了"
-          />
-          <div class="part1">
-            <div class="little-row">
-              <p class="money"><b>$65.00</b></p>
-              <p class="fshi">Free shipping</p>
-            </div>
-            <div class="clear"></div>
-            <p>
-              Ready to dress up or down, these classic canvas Chucks are an
-              everyday wardrobe staple
-            </p>
-            <a class="more" href="#">More information &rarr;</a>
+        <h2 class="title">Converse Chuck Taylor All Star Low Top</h2>
 
-            <div class="color-bars">
-              <div class="color-bar color-1">&nbsp</div>
-              <div class="color-bar color-2">&nbsp</div>
-              <div class="color-bar color-3">&nbsp</div>
-              <div class="color-bar color-4">&nbsp</div>
-              <div class="color-bar color-5">&nbsp</div>
-              <div class="color-bar color-6">&nbsp</div>
-            </div>
+        <img
+          class="part0"
+          src="img/challenges.jpg"
+          width="240px"
+          height="240px"
+          alt="图片炸了"
+        />
+        <div class="part1">
+          <div class="little-row">
+            <p class="money"><b>$65.00</b></p>
+            <p class="fshi">Free shipping</p>
           </div>
-          <div class="part2">
-            <h3 class="product-details">Product details</h3>
-            <ul class="details">
-              <li>Lightweight, durable canvas sneaker</li>
-              <li>Lightly padded footbed for added comfort</li>
-              <li>Iconic Chuck Taylor ankle patch</li>
-            </ul>
+          <div class="clear"></div>
+          <p>
+            Ready to dress up or down, these classic canvas Chucks are an
+            everyday wardrobe staple
+          </p>
+          <a class="more" href="#">More information &rarr;</a>
+
+          <div class="color-bars">
+            <div class="color-bar color-1">&nbsp</div>
+            <div class="color-bar color-2">&nbsp</div>
+            <div class="color-bar color-3">&nbsp</div>
+            <div class="color-bar color-4">&nbsp</div>
+            <div class="color-bar color-5">&nbsp</div>
+            <div class="color-bar color-6">&nbsp</div>
           </div>
         </div>
+        <div class="part2">
+          <h3 class="product-details">Product details</h3>
+          <ul class="details">
+            <li>Lightweight, durable canvas sneaker</li>
+            <li>Lightly padded footbed for added comfort</li>
+            <li>Iconic Chuck Taylor ankle patch</li>
+          </ul>
+        </div>
         <button class="add-to-cart">Add to cart</button>
       </article>
     </body>
diff --git a/starter/02-HTML-Fundamentals/stylec.css b/starter/02-HTML-Fundamentals/stylec.css
@@ -91,6 +91,7 @@ li ul {
 
 .add-to-cart {
   width: 100%;
+  grid-column: 1 / -1;
 }
 
 .container {
@@ -210,13 +211,26 @@ li ul {
 
 .part1 {
   flex: 1;
-  margin-left: 40px;
+  /* margin-left: 40px;
+  margin-top: 20px;
+  margin-right: 40px; */
   margin-top: 20px;
-  margin-right: 40px;
 }
 
 .part2 {
   flex: 1;
   /* margin-top: 20px; */
   /* margin-right: 40px; */
+  margin-top: 20px;
+}
+
+article {
+  display: grid;
+  grid-template-columns: 250px 1fr 1fr;
+  column-gap: 40px;
+  align-items: start;
+}
+
+.title {
+  grid-column: 1 / -1;
 }
