Làm thế nào để tạo một "ốc" css?

Question

Tôi có hình ảnh tôi muốn hiển thị dưới dạng vòng tròn với (border-radius:50%) và trên cùng một dòng, tôi muốn có một số văn bản có chiều rộng và nền được đặt. Tôi không muốn mã cứng bất kỳ giá trị nào. Cách tốt nhất để hoàn thành điều này là gì?

Dưới đây là một hình ảnh

fiddle

<div class="header"> 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> 
    <p class="headingText">Hello</p> 
</div> 

.i { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
} 

.headingText { 
    color: white; 
    background: black; 
    display: inline-block; 
    width: 350px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align: center; 
} 

Answer 1

Bạn có thể thử một cái gì đó như thế này:

.header 
{ 
    padding-top:26px; 
    padding-left:40px; 
    position:relative; 
} 
.i 
{ 
    position:absolute; 
    width:80px; 
    height:80px; 
    border-radius:50%; 
    top:0; 
    left:0; 
} 

.headingText 
{ 
    color:white; 
    background:black; 
    display:inline-block; 
    width:350px; 
    padding-top:10px; 
    padding-bottom:10px; 
    text-align:center; 
} 

Answer 2

sử dụng một yếu tố ngăn chặn thay vì với một biên độ tiêu cực lên hàng đầu (một nửa kích thước vòng tròn - một nửa của padding) và một lề bên trái (kích thước vòng tròn một nửa). Chỉ cần thay đổi:

.headingText { 
    /*display: inline-block;*/ 
    display: block; 
    margin-top: -45px; 
    margin-left: 40px; 
} 

Ví dụ fiddle: https://jsfiddle.net/c67dchhv/

Answer 3

Chỉ cần thêm position: absolute trong i lớp sau đó kiểm soát bên lề headingtext:

HTML:

<div class="header"> 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> 
    <p class="headingText">Hello</p> 
</div> 

CSS:

.i 
{ 
    width:80px; 
    height:80px; 
    border-radius:50%; 
    position: absolute; 
} 

.headingText 
{ 
    color:white; 
    background:black; 
    display:inline-block; 
    width:350px; 
    padding-top:10px; 
    padding-bottom:10px; 
    text-align:center; 
    margin: 40px 0 0 37px; 
} 

FIDDLE

Answer 4

chỉ đơn giản làm .header class position:relative; nếu bạn muốn xác định bất kỳ chiều cao và chiều rộng, bạn có thể, .i class position:absolute; cho lợi nhuận trên .headingtext classhttps://jsfiddle.net/hamzanisar/aphzeyyt/ có lẽ nó sẽ hữu ích cho bạn.

Answer 5

Sử dụng các lớp giả và định vị tuyệt đối bạn có thể nhận được hiệu ứng bạn muốn.

Câu trả lời dưới đây sử dụng HTML hiện tại của bạn để bạn không phải thay đổi bất kỳ điều gì và chỉ thay đổi CSS của bạn.

Bạn có thể thêm một số phần đệm khác vào văn bản để làm cho nó có khoảng cách hơn một chút nếu cần và nền sẽ tự sắp xếp.

.header { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 30px; 
 
    overflow: visible; 
 
} 
 
.header img.i { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    bottom: 16px; 
 
    left: -40px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    border: 3px solid black; 
 
} 
 
.header p.headingText { 
 
    padding: 16px 32px 16px 80px; 
 
    color: black; 
 
    border: 3px solid black; 
 
}

<div class="header"> 
 
    <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" /> 
 
    <p class="headingText">Hello</p> 
 
</div>