HTML 和 CSS 响应式布局
[英]HTML and CSS responsive layout
问题描述
我想做一个响应式布局。 但我做错了什么。 这就是我想让我的布局看起来像的方式
.row_4 { background-color: #F9F8FD; height: 14.87%; width: 100%; display: flex; flex-flow: row; justify-content: space-between; }.info { margin-left: 4.83%; margin-top: 2.9%; float: left; }.action { display: flex; flex-flow: row; margin-right: 3%; }
<div class="row_4" id="rapper_1"> <div class="pfp"> <img src="profile_pics/eminem.jpg" alt="Eminem"> </div> <div class="info"> <div class="name"> Eminem </div> <div class="number"> 7867598568 </div> <div class="designation"> RAPGOD </div> </div> <div class="action"> <div class="message"> <i id="sms_logo" class="fa fa-comment-dots"></i> </div> <div class="call"> <i id="phone_logo" class="fa fa-phone"></i> </div> </div> </div>
2 个解决方案
解决方案1
3 2022-08-02 12:54:42
我从不建议使用
margin和%来居中，
只是 flexbox，具有justify和align等属性
* { /* this is important so image don't go outside the card div after writing 100% with padding */ box-sizing: border-box; }.row_4 { display: flex; background-color: #f9f8fd; /* with this type of card, normally we try to make them responsive by width, not height. so is good having a static value here */ /* the card is 10rem (since I counted that you are using 15%, and my screen is 999px so 15% of 999px is 150px, that translate to 10rem (1rem = 16px) */ height: 10rem; border-radius: 1rem; }.pfp img { /* this 100% will only work if you added on the top box-sizing */ /* because the height then it will be (10rem - (0.5rem * 2)) */ height: 100%; padding: 0.5rem; border-radius: 1rem; }.info { display: flex; /* this make them like grid behaviur, but in flexbox */ flex-direction: column; /* in the html a wrapped the first two elements in one div, so this will work */ justify-content: space-between; padding: 1rem 0.5rem; }.action { display: flex; align-items: center; justify-content: center; /* so the.action can have all the width that remains, to can be centered responsivelly */ flex: 1; gap: 1rem; color: orange; } /* not important this next lines, just styling */.info.name { font-size: 2rem; font-weight: 800; }.info.number { opacity: 0.5; } /*.row_4 > * { border: 1px dashed red; } */
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="row_4" id="rapper_1"> <:-- 1 --> <div class="pfp"> <img src="https.//picsum,photos/200" alt="Eminem" /> </div> <!-- 2 --> <div class="info"> <!-- here I changed some stuff --> <!-- basically I wrapped the first two element inside one, so we can add a space-between successfully --> <div> <div class="name">Eminem</div> <div class="number">7867598568</div> </div> <div class="designation">RAPGOD</div> </div> <!-- 3 --> <div class="action"> <div class="message"> <i id="sms_logo" class="fa fa-comment-dots"></i> </div> <div class="call"> <i id="phone_logo" class="fa fa-phone"></i> </div> </div> </div> </body>
解决方案2
0 2022-08-02 13:38:37
*, *::before, *::after { box-sizing: border-box; } body { background: black; /* ^^^ for demo purposes. because putting white on white is dumb */ }.profile { display: flex; background: white; padding: 0.25em; border-radius: 10px; justify-content: space-between; max-width: 80%; margin: 0 auto; }.profile__wrapper { display: flex; gap: .675em; }.profile__image { background-size: cover; aspect-ratio: 1; width: 80px; border-radius: 10px; }.profile__info { display: flex; flex-direction: column; justify-content: space-between; margin-block: .5em.25em; }.profile__name { font-family: sans-serif; color: hsl(0 0% 50%); font-weight: 700; }.profile__number { color: hsl(220 100% 50%); font-size: .8rem; }.profile__msg>svg { width: 1.5rem; color: orange }.profile__call>svg { width: 2rem; color: orange; }.profile__buttons { margin: auto 0; margin-right: 1.5em; display: flex; gap: 1em; justify-content: center; align-items: center; }
<div class="profile"> <div class="profile__wrapper"> <div class="profile__image" style="background-image: url('https://randomuser.me/api/portraits/men/83.jpg')"></div> <div class="profile__info"> <div class="profile__info_wrapper"> <div class="profile__name">Uncle Joe</div> <div class="profile__number">123456</div> </div> <div class="profile__nickname">Broseph</div> </div> </div> <div class="profile__buttons"> <div class="profile__msg"> <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs><style>.cls-1{fill: CurrentColor;}</style></defs><path class="cls-1" d="M448,76.56A38.44,38.44,0,0,1,486.4,115v230.4a38.44,38.44,0,0,1-38.4,38.4H66.2l-7.5,7.5-33.1,33.1V115A38.44,38.44,0,0,1,64,76.56H448M448,51H64A64,64,0,0,0,0,115V443.21A17.78,17.78,0,0,0,17.92,461a17.42,17.42,0,0,0,12.45-5.25L76.8,409.36H448a64,64,0,0,0,64-64V115a64,64,0,0,0-64-64Z"/><path class="cls-1" d="M332.8,191.76H179.2a12.8,12.8,0,0,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path class="cls-1" d="M332.8,243H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path class="cls-1" d="M332.8,294.16H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,0,1,0,25.6Z"/></svg> </div> <div class="profile__call"> <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs> <style xmlns="http://www.w3.org/2000/svg">.svg__phone__call1 { transform: rotate(-45deg); transform-origin: center center } </style> </defs><path xmlns="http://www.w3.org/2000/svg" class="svg__phone__call1" d="M258.7,80.74,236.91,101.4c-74.85,72.75-64.43,247,0,309.87l21.79,20.66c5.68,5.39,15.16,5.39,21.79,0l42.64-41.32a14.64,14.64,0,0,0,0-20.66L276.7,324.15l-50.22,3.59c-15.16-14.37-15.16-129.34,0-143.71l52.11,2.69,44.53-44a14.64,14.64,0,0,0,0-20.66L280.49,80.74C273.86,74.46,264.39,74.46,258.7,80.74Z" fill="CurrentColor"/></svg> </div> </div>
表响应式布局CSS / HTML
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.