소스 검색

добавил flex в main блоки

Emmanuil 5 년 전
부모
커밋
14fb8f5787
2개의 변경된 파일10개의 추가작업 그리고 14개의 파일을 삭제
  1. 3 12
      index.html
  2. 7 2
      style/style.css

+ 3 - 12
index.html

@@ -47,10 +47,7 @@
               <img class="img-box" src="img/box.jpg" alt="image" />
               <img class="img-box" src="img/box.jpg" alt="image" />
               <h1>Lorem ipsum dolor sit amet.</h1>
               <h1>Lorem ipsum dolor sit amet.</h1>
               <p>
               <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
-                ex sint molestiae numquam dolore adipisci quaerat tenetur,
-                facere illum deserunt excepturi aperiam voluptates! Unde
-                repudiandae omnis autem optio? Voluptates, eaque!
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
               </p>
               </p>
               <a href="#">Go</a>
               <a href="#">Go</a>
             </div>
             </div>
@@ -60,8 +57,6 @@
               <p>
               <p>
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
                 ex sint molestiae numquam dolore adipisci quaerat tenetur,
                 ex sint molestiae numquam dolore adipisci quaerat tenetur,
-                facere illum deserunt excepturi aperiam voluptates! Unde
-                repudiandae omnis autem optio? Voluptates, eaque!
               </p>
               </p>
               <a href="#">Go</a>
               <a href="#">Go</a>
             </div>
             </div>
@@ -69,10 +64,7 @@
               <img class="img-box" src="img/box.jpg" alt="image" />
               <img class="img-box" src="img/box.jpg" alt="image" />
               <h1>Lorem ipsum dolor sit amet.</h1>
               <h1>Lorem ipsum dolor sit amet.</h1>
               <p>
               <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
-                ex sint molestiae numquam dolore adipisci quaerat tenetur,
-                facere illum deserunt excepturi aperiam voluptates! Unde
-                repudiandae omnis autem optio? Voluptates, eaque!
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
               </p>
               </p>
               <a href="#">Go</a>
               <a href="#">Go</a>
             </div>
             </div>
@@ -82,8 +74,7 @@
               <p>
               <p>
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
                 ex sint molestiae numquam dolore adipisci quaerat tenetur,
                 ex sint molestiae numquam dolore adipisci quaerat tenetur,
-                facere illum deserunt excepturi aperiam voluptates! Unde
-                repudiandae omnis autem optio? Voluptates, eaque!
+                facere illum deserunt excepturi aperiam voluptates!
               </p>
               </p>
               <a href="#">Go</a>
               <a href="#">Go</a>
             </div>
             </div>

+ 7 - 2
style/style.css

@@ -76,6 +76,9 @@ li>a:hover{
     height: 350px;
     height: 350px;
     padding-top: 15px;
     padding-top: 15px;
     margin-bottom: 25px;
     margin-bottom: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 }
 
 
 .box:hover{
 .box:hover{
@@ -87,7 +90,7 @@ li>a:hover{
 }
 }
 
 
 .img-box{
 .img-box{
-    width: 100px;
+    height: 100px;
     border: 10px rgb(208, 187, 187) solid;
     border: 10px rgb(208, 187, 187) solid;
     border-radius: 100%;
     border-radius: 100%;
 }
 }
@@ -99,7 +102,8 @@ h1{
 }
 }
 
 
 .box>p{
 .box>p{
-    padding: 20px ;
+    padding: 20px 20px 0 ;
+    flex-grow: 1;
 }
 }
 
 
 .box>a{
 .box>a{
@@ -110,6 +114,7 @@ h1{
     height: 30px;
     height: 30px;
     display: inline-block;
     display: inline-block;
     padding-top: 3px;
     padding-top: 3px;
+    margin-bottom: 10px;
     color: rgb(255, 255, 255);
     color: rgb(255, 255, 255);
     font-weight: bold;
     font-weight: bold;
 }
 }