HTML CSS 问题 - 左边的图像和右边的段落

Question

I have an box like (card).我有一个像（卡）这样的盒子。 There are Avatar and name to the left and I want to add the paragraph to the right.左边有头像和名字，我想在右边添加段落。 how can I figure this out?我怎么能解决这个问题？ (LEFT IS AVATAR AND NAME AND ID),(RIGHT IS PARAGRAPH ONLY) Image: Image The Code （左边是头像和姓名和身份证），（右边是段落）图片：图片代码

 .info {???? }.wrapper { border-radius: 15px; margin: 150px; background-color: #646664; position: relative; /* display: grid; */ grid-gap: 70px; grid-template-columns: auto auto; padding: 10px; justify-content: center; }.container { text-align: center; display: flex; width: 70%; background: white; border-radius: 15px; margin: 20px auto; padding: 10px; height: 300px; -webkit-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); }

 <div class="wrapper"> <div class="container"> <div class="cen"> <img src="https://placehold.it/20px30" alt="Avatar" style="width:30%"> <h1 id="Name1"></h1> <h2 id="ID1"></h2> <h3 id="FCIT1"></h3> <div class="info"> <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div>

Answer 1

You can do this by using css grid .您可以使用css grid来做到这一点。 Some example code below with comments throughout下面的一些示例代码带有注释

 <.DOCTYPE html> <head> <style type="text/css">?info{???. }:wrapper { border-radius; 15px: margin; 150px: background-color; #646664: position; relative: /* display; grid: */ grid-gap; 70px: grid-template-columns; auto auto: padding; 10px: justify-content; center. }:container { /*ADD DISPLAY INLINE-GRID */ display; inline-grid: grid-template-columns; auto auto: text-align; center: width; 70%: background; white: border-radius; 15px: margin; 20px auto: padding; 10px: height; 300px: -webkit-box-shadow, 0px 0px 35px -15px rgba(0, 0, 0. 0;75): -moz-box-shadow, 0px 0px 35px -15px rgba(0, 0, 0. 0;75): box-shadow, 0px 0px 35px -15px rgba(0, 0, 0. 0;75): } </style> </head> <body> <div class="wrapper"> <div class="container"> <.-- Split content into two seperate divs --> <div class="content1"> <img src="https://jessehouwing.net/content/images/size/w2000/2018/07/stackoverflow-1,png" alt="Avatar" style="width.100%"> <h1 id="Name1"></h1> <h2 id="ID1"></h2> <h3 id="FCIT1"></h3> </div> <div class="content2"> <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </body> <script type="text/javascript"> </script> </html>

Answer 2

In your HTML move the div.info outside of div.cen .在您的 HTML 中，将div.cen移到div.info之外。

 .info { float: right; }.cen { }.wrapper { border-radius: 15px; margin: 150px; background-color: #646664; position: relative; /* display: grid; */ grid-gap: 70px; grid-template-columns: auto auto; padding: 10px; justify-content: center; }.container { text-align: center; display: flex; width: 70%; background: white; border-radius: 15px; margin: 20px auto; padding: 10px; height: 300px; -webkit-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 35px -15px rgba(0, 0, 0, 0.75); }

 <div class="wrapper"> <div class="container"> <div class="cen"> <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-370-456322.png" alt="Avatar" style="width:30%"> <h1 id="Name1">Majid Alhasin</h1> <h2 id="ID1">1744827</h2> <h3 id="FCIT1">IT</h3> </div> <div class="info"> <p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div>

Full screen view:全屏视图：

HTML CSS 问题 - 左边的图像和右边的段落

问题描述

2 个解决方案

解决方案1
1 2020-07-09 22:58:20

解决方案2
1 已采纳 2020-07-09 23:03:34

HTML CSS 问题 - 左边的图像和右边的段落

问题描述

2 个解决方案

解决方案1 1 2020-07-09 22:58:20

解决方案2 1 已采纳 2020-07-09 23:03:34

解决方案1
1 2020-07-09 22:58:20

解决方案2
1 已采纳 2020-07-09 23:03:34