css - 通过具有半径的 div 删除不可见的承载-6ren

css - 通过具有半径的 div 删除不可见的承载

转载作者：行者123 更新时间：2023-11-28 02:34:57

24

4

我的问题

我试图让内容紧挨着具有以下内容的 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?

What I want

I am doing that(above) by using position:absolute; right:integer;

** 我不想使用 position: absolute;

将 next 设置为半径 div

感觉这不专业

我的问题

如何不使用 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/

24

4

0

文章推荐： javascript 本地存储 Visual Studio

文章推荐： html - 媒体查询适用于浏览器调整大小，而不适用于移动设备

文章推荐： c++ - 为 g++ 编译器创建一个 makefile

文章推荐： javascript - Userscript，如何替换HTML标签和属性

javascript - 尝试使用 AD token /承载 token [Azure-Blob][承载 token ] 将文件放入 Azure Blob 中时授权权限不匹配
我能够CreateContainers、ListContainers、ListBlobs，但是当我尝试发出PUT/DELETE请求来上传或时>删除 Azure 存储 blob 中的文件，但发出请求后显
python - 代表客户验证 keycloak 承载 token
我想验证从浏览器应用程序传递过来的 API 中的不记名 token 。 API 将通过调用 ../userinfo 端点来验证针对 Keycloak 的 token ，如果检查运行正常，则以所需的内容
c# - Azure Apim 承载 token
大家好，我正在关注 azure 的下一个教程: https://learn.microsoft.com/en-us/rest/api/apimanagement/current-ga/subscrip
用于集成测试的 Azure AD 承载 token ？
我们即将开始集成测试我们的 REST API，这些 API 使用 ADAL.js/不记名 token /passport-azure-ad 进行保护。现在讨论实际问题，在自动化测试中，我将如何获取不
用于集成测试的 Azure AD 承载 token ？
我们即将开始集成测试我们的 REST API，这些 API 使用 ADAL.js/不记名 token /passport-azure-ad 进行保护。现在讨论实际问题，在自动化测试中，我将如何获取不
javascript - 通过 Javascript 发送授权 token 承载
我正在尝试通过 Javascript 将授权 token 承载发送到 REST 端点，所以我这样做: $.ajax( { url: 'http://localhost:8080/resourc
asp.net-core - 用于授权和身份验证的多个 JWT 承载
我有一个用于 SSO 的 .NET Core IdentityServer (IS)，我想用它来对我的 .NET Core(后端)-Angular(客户端)应用程序进行身份验证。我希望在后端有一个 E
android - 承载 token 请求 http flutter
我需要为我的 API 发送我的 token 。我将我的 token 保存在 SharedPreferences 中，我可以恢复它。我的 API 需要一个，与 Bearer 但怎么办？我测试了授权、H
oauth - OAuth 2.0 承载 token 到底是什么？
根据RFC6750 -OAuth 2.0授权框架:不记名 token 使用，不记名 token 是: A security token with the property that any party
适用于多个 WebApi 端点的 Azure AD 承载 token ？
我们使用 Angular、.Net WebApi 和 Azure 构建多个应用程序。我们一直在做的是通过隐式 oAuth2/OIDC 授权流程通过 Azure AD 保护应用程序。一切进展顺利，但到
c# - Web API2 identity2 承载 token 权限更改
使用 Owin + Oauth2 + Identity2。我有一个带有默认基本身份验证设置的 web Api，我已对其进行修改。我的 startup.cs 部分类 public void Conf
c# - 承载 Flash ActiveX 组件时的 WPF 窗口透明度
我的应用程序有一个自定义窗口设计，这意味着每个窗口都有以下参数集 (XAML):WindowStyle="无"AllowsTransparency="假" 其中一个子窗口需要显示一个 Flash 组件
c# - 使用 JWT 承载 token 的身份验证 Swagger
我们正在开发具有 JWT Bearer 身份验证的 .Net Core 2.1 Web API。应用程序本身将生成并分发要发送到后端的 token 。虽然我们已启动并运行所有内容，即我们可以从 An
c# - 使用 OWIN 从 asp.net 核心发布的 oAuth 承载
我有带有 OWIN 管道的 ASP.NET 4.5 服务，它发出 OAuth access_token 以换取用户名/密码。该服务从 ng-app 调用，一旦它获得 token ，就会存储在浏览器的本
java - Oauth v2 承载 token 具有 Oauth v1 属性
我有一个使用 Azure Active Directory 的 Java 后端应用程序。我正在使用 oauth2 不记名 token 登录。在后端，我正在搜索并使用 oauth2 属性“preferr
post - MVC POST 请求丢失授权 header - 检索后如何使用 API 承载 token
上周我为现有 MVC 应用程序创建了一个 API，现在正在尝试保护 API 并根据需要重新设计 MVC 端安全性。目前，MVC 应用程序设置为通过 OWIN/OAuth/Identity 使用应用程
javascript - 在 header 中传递 openid-connect oauth2 承载 token
背景我已经实现了 Thinktecture.IdentityServer.V3(openID Connect 之一)。我已将 OAuth2 承载 token 以以下形式返回到我的 javascrip
java - 承载 token 失败 MockMvc 测试 Java Spring Boot
我不明白为什么这不起作用。我假设这是我忽略的简单事情。所有其他不使用 token 的测试方法都可以正常工作。目前 token 没有过期时间，我可以通过 Postman 很好地使用它。 @Test pu
node.js - NodeJS 加密 RS-SHA256 和 JWT 承载
在使用 passport 和 oauth2orize 实现 oauth2 堆栈时，在这种情况下，问题特别在于使用 oauth2orize jwt 承载。 oauth2orize jwt bearer
asp.net - .NET Web API 2 OWIN 承载 token 身份验证
我正在我的 .NET Web 应用程序中实现 Web API 2 服务架构。消费请求的客户端是纯 javascript，没有 mvc/asp.net。我正在使用 OWIN 尝试根据本文 OWIN Be

首页

博学

6Ren·AI

商城

css - 通过具有半径的 div 删除不可见的承载