我的问题
我试图让内容紧挨着具有以下内容的 div:css- Border-radius:100%;
I want the text to be by the image
Why is there a gab between the text and image?
Notice how even tho the div has the radius, its still, square; Its invisible
If there a way to make the "invisible bearer radius" too?
I am doing that(above) by using
position:absolute; right:integer;
** 我不想使用 position: absolute;
感觉这不专业
我的问题
如何不使用 Position: absolute 使文本位于图像的右侧，紧挨着图像；
代码-html5
<!DOCTYPE html>
<html>
<head>
<title>Xlaeo-Hom</title>
<!DOCTYPE html>
<html>
<head>
<title>Xlaeo-Hom</title>
<link rel="stylesheet" type="text/css" href="..\defaultCSS-css.css\default-css.css" />
<link rel="stylesheet" type="text/css" href=".\center-css.css" />
</head>
<body>
<div>
<div class="vvn_flex vvn_flex_center">
<div class="vvn_main_wrapper">
<main role="main">
<section>
<span class="vvn_flex vvn_connect_wrp">
<section class="vvn_flex vvn_prjwrooadf">
<span class="">
<div class="vvn_prj_medContoon vvn_relPos">
<div class="vvn_project_media_holder vvn_mediaProject_border">
<img src="https://cdn.pixabay.com/photo/2017/09/27/10/30/robot-2791671_960_720.jpg"/>
</div>
</div>
</span>
<span class="">
<div class="vvn_project_abnJI322323" >
< want to be next to the image :(
</div>
</span>
</section>
</span>
</Section>
</main>
</div>
</div>
</div>
</body>
</html>
</head>
<body>
<div>
<div class="vvn_flex vvn_flex_center">
<div class="vvn_main_wrapper">
<main role="main">
<section>
<!-- media holder_slide_image-->
</Section>
</main>
</div>
</div>
</div>
</body>
</html>
代码-css
body{
color:gray;
margin: 0;
padding:0;
}
li{
list-style-type: none;
}
.vvn_theme_main{
margin-top:1rem;
}
.vvn_flex{
display: flex;
}
.vvn_flex_center{
justify-content: center;
}
.vvn_flex_dec{
flex-direction: column;
}
.vvn_main_wrapper{
width:90%;
}
.vvn_1flex{
flex:1;
}
.vvn_theme_border{
border:1px solid lightgray;
}
.vvn_brgborder{
border-top:1px solid lightgray;
border-bottom: 1px solid lightgray;
}
img{
width:100%;
height: 100%;
}
.vvn_theme_padding{
padding-left:1rem;
padding-right: 1rem;
}
.vvn_theme_margintb{
padding-top:1rem;
padding-bottom: 1rem;
}
.vvn_relPos{
position: relative;
}
.vvn_auto_left{
margin-left:auto;
}
.vvn_auto_right{
margin-right: auto;
}
.vvn_connect_wrp{
margin-top: 100px;
}
.vvn_prjwrooadf{
flex:1;
}
.vvn_prj_medContoon{
}
.vvn_project_media_holder{
height:480px;
width:480px;
overflow: hidden;
}
.vvn_mediaProject_border{
border-radius: 100%;
border:1px solid gray;
}
.vvn_project_abnJI322323{
line-height: 40px;
}
最佳答案
https://jsfiddle.net/nx12s6y0/
这对我有用，如果这是你想要的，请告诉我
.vvn_project_abnJI322323{
line-height: 40px;
margin-left:-120px; /*add this*/
}
关于css - 通过具有半径的 div 删除不可见的承载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48086200/