Question

如何获得附加的布局
使用html，bootstrap，CSS
圆圈将包含图像的地方
并在其旁边放置一个详细信息框

问题已使用代码段更新我所做的是不准确的，没有响应的大小

如果我使圆大于矩形，则它不会在中间垂直对齐矩形内的代码也不在中间有人可以给我演示一下吗？
custom layout

   .rectangle1{
        display:block;
        height:40px;
        width:150px;
        background:red;
        position:relative;
        margin-top:100px;
      }

      .circle1{
        position:absolute;
        height:40px;
        width:40px;
        border-radius:40px;
        border:3px solid white;
        left:0%;
        margin-left:-25px;
        top: 0px;
        background:red;
      }
      .rectangle1{
       display: inline-block;
       height: 100px;
       width: 100%;
       background: #6f0a18;
       position: relative;
     }

     .circle1{
      position:absolute;
      height:100px;
      width:100px;
      border-radius:50%;
      border:3px solid white;
      left:0%;
      margin-left:-25px;
      top: 0px;
      background:red;
    }


    .circle2{
      position:absolute;
      height:100px;
      width:100px;
      border-radius:50%;
      border:3px solid white;
      right:0%;
      margin-right:-25px;
      top: 0px;
      background:red;
    }

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="rectangle1">
        <img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png"  />
        <h3 style="padding-left: 100px;">Title</h3>
        <p style="padding-left: 100px;"> Sub Title</p>
      </div>

    </div>
    <div class="col-md-6">
      <div class="rectangle1">
       <img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png"  />
       <h3 style="padding-right: 100px; text-align: right;">Title</h3>
       <p style="padding-right: 100px; text-align: right;"> Sub Title</p>
     </div>
   </div>
 </div>
</div>

Answer 1

尝试这样的事情：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
  height: 40px;
  width: 40px;
  background-color: #000;
  border-radius: 50%;
}
#id1 {
   
    
    border: 1px solid black;
    padding: 11px;
    margin: 30px;
    width: 100px;
    
   
}
</style>
</head>
<body>

<h2>Circle CSS</h2>
<div class="circle"><div id='id1'>  text here</div></div>

</body>
</html>

Answer 2

#loginModal

    .outer-wrapp {
      padding:30px;
    }
    ul {
      list-style:none;
      padding:0;
    }
    ul li {
          margin: 55px 0px;
    }
    .wrapp{
      padding:0px 15px;
    }
    .left .box {
      position:relative;
      width:95%;
      height:35px;
      border:1px solid #000;
      margin-left: 5%;
      padding-left: 20%;
    }
    .left .circle {
      position:absolute;
      width:75px;
      height:75px;
      border-radius:50%;
      background:#000;
      top: calc(50% - 37.5px);
      left: -37.5px;
    }
    
    .right .box {
      position:relative;
      width:95%;
      height:35px;
      border:1px solid #000;
      margin-right: 5%;
      padding-right: 20%;
    }
    .right .circle {
      position:absolute;
      width:75px;
      height:75px;
      border-radius:50%;
      background:#000;
      top: calc(50% - 37.5px);
      right: -37.5px;
    }

尝试一下。它为您工作。

Answer 3

尝试

.container{
width:100%;
background:red;
margin:10px 0;
}

#image{
width:20%;
float:left;
}


#image img{
border-radius: 50px;
}

#text{
width:80%;
float:left;
}

#text h3{
padding:10px;
}

<div class="container"> 
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>

<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>

<div class="container"> 
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>

<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>

创建圆形图像，并在其旁边创建一个详细框css，html，bootsrap

3 个答案: