html - 围绕圆形 div 环绕文本的问题
问题描述
我知道以前有人问过类似的问题，但我一直在遵循这些问题的答案的指导，但似乎仍然一无所获。
我正在尝试设计一个博客。我想要右下角的圆形图像，文章文本环绕它，但是带有文本的 div 和图像 div 似乎不想一起玩。我的代码可能很差，解决方案很明显，但请不要轻易我需要学习！非常感谢任何帮助。
.jumbotron {
background-color: transparent !important;
}
nav {
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
.navtitle {
font-family: 'Prata', serif;
font-size: 2.1rem;
}
.red {
background-color: red;
}
.article {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=fffcd9&density=66&opacity=44);
-webkit-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
-moz-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
box-shadow: 11px 10px 53px -8px rgba(0, 0, 0, 0.36);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60rem;
padding: 40px;
box-sizing: border-box;
}
.circle {
width: 28rem;
height: 28rem;
border-radius: 50%;
float: left;
shape-outside: circle();
margin: 30px;
background: url(https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1333&q=80);
background-size: cover;
}
.title {
font-size: 72px;
font-family: 'Prata', serif;
font-weight: bolder;
margin-left: 20px;
}
.articlecontent {
font-size: 1.1rem;
font-family: 'Nunito Sans', sans-serif;
margin-left: 10px;
}
#mainsection {
margin-top: 28rem;
position: relative;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="palebluestyle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1"><span class="navtitle">Pale Blue Dot.</span></span>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Find Articles" aria-label="Search">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
</head>
<body>
<div class="container" id="mainsection">
<div class="jumbotron mainart">
<div class="article">
<div class="title"><h1>Article Title</h1></div>
<div class="articlecontent">
<p>Qui tempor excepteur ex anim proident. Pariatur veniam non dolore ut eu excepteur veniam.
Elit sunt non culpa duis cupidatat laboris cupidatat reprehenderit sint incididunt aliquip occaecat.
Dolore consectetur occaecat deserunt sit ullamco ipsum qui ipsum eiusmod eu culpa occaecatdo.
Qui enim non sint consequat aliqua anim est laboris anim Lorem incididunt ad in velit.
Esse laboris amet laborum enim magna duis Lorem proident commodo ex.
Cillum quis irure magna quis dolore. Deserunt tempor aliqua ut laboris cillum dolor cupidatat anim laboris qui. Eu ut sit ut cupidatat. Lorem occaecat aliquip sit et. Veniam do deserunt sint sunt ad et minim nulla in. Et cupidatat culpa nostrud laboris officia fugiat laboris anim excepteur.
</p></div>
<div class="circle"></div>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>解决方案
.jumbotron {
background-color: transparent !important;
}
nav {
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
.navtitle {
font-family: 'Prata', serif;
font-size: 2.1rem;
}
.red {
background-color: red;
}
.article {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=fffcd9&density=66&opacity=44);
-webkit-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
-moz-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
box-shadow: 11px 10px 53px -8px rgba(0, 0, 0, 0.36);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60rem;
padding: 40px;
box-sizing: border-box;
}
.circle {
width: 28rem;
height: 28rem;
border-radius: 50%;
float: left;
shape-outside: circle();
margin: 30px;
background: url(https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1333&q=80);
background-size: cover;
}
.title {
font-size: 72px;
font-family: 'Prata', serif;
font-weight: bolder;
margin-left: 20px;
}
.articlecontent {
font-size: 1.1rem;
font-family: 'Nunito Sans', sans-serif;
margin-left: 10px;
}
#mainsection {
margin-top: 28rem;
position: relative;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="palebluestyle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1"><span class="navtitle">Pale Blue Dot.</span></span>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Find Articles" aria-label="Search">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
</head>
<body>
<div class="container" id="mainsection">
<div class="jumbotron mainart">
<div class="article">
<div class="title"><h1>Article Title</h1></div>
<div class="circle"></div>
<div class="articlecontent">
<p>Qui tempor excepteur ex anim proident. Pariatur veniam non dolore ut eu excepteur veniam.
Elit sunt non culpa duis cupidatat laboris cupidatat reprehenderit sint incididunt aliquip occaecat.
Dolore consectetur occaecat deserunt sit ullamco ipsum qui ipsum eiusmod eu culpa occaecatdo.
Qui enim non sint consequat aliqua anim est laboris anim Lorem incididunt ad in velit.
Esse laboris amet laborum enim magna duis Lorem proident commodo ex.
Cillum quis irure magna quis dolore. Deserunt tempor aliqua ut laboris cillum dolor cupidatat anim laboris qui. Eu ut sit ut cupidatat. Lorem occaecat aliquip sit et. Veniam do deserunt sint sunt ad et minim nulla in. Et cupidatat culpa nostrud laboris officia fugiat laboris anim excepteur.
</p></div>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>.jumbotron {
background-color: transparent !important;
}
nav {
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
}
.navtitle {
font-family: 'Prata', serif;
font-size: 2.1rem;
}
.red {
background-color: red;
}
.article {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=fffcd9&density=66&opacity=44);
-webkit-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
-moz-box-shadow: 11px 10px 53px -8px rgba(0,0,0,0.36);
box-shadow: 11px 10px 53px -8px rgba(0, 0, 0, 0.36);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60rem;
padding: 40px;
box-sizing: border-box;
}
.circle {
width: 28rem;
height: 28rem;
border-radius: 50%;
float: right;
shape-outside: circle();
margin: 30px;
background: url(https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1333&q=80);
background-size: cover;
}
.title {
font-size: 72px;
font-family: 'Prata', serif;
font-weight: bolder;
margin-left: 20px;
}
.articlecontent {
font-size: 1.1rem;
font-family: 'Nunito Sans', sans-serif;
margin-left: 10px;
}
#mainsection {
margin-top: 28rem;
position: relative;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prata&display=swap" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="palebluestyle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1"><span class="navtitle">Pale Blue Dot.</span></span>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Find Articles" aria-label="Search">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
</head>
<body>
<div class="container" id="mainsection">
<div class="jumbotron mainart">
<div class="article">
<div class="title"><h1>Article Title</h1></div>
<div class="circle"></div>
<div class="articlecontent">
<p>Qui tempor excepteur ex anim proident. Pariatur veniam non dolore ut eu excepteur veniam.
Elit sunt non culpa duis cupidatat laboris cupidatat reprehenderit sint incididunt aliquip occaecat.
Dolore consectetur occaecat deserunt sit ullamco ipsum qui ipsum eiusmod eu culpa occaecatdo.
Qui enim non sint consequat aliqua anim est laboris anim Lorem incididunt ad in velit.
Esse laboris amet laborum enim magna duis Lorem proident commodo ex.
Cillum quis irure magna quis dolore. Deserunt tempor aliqua ut laboris cillum dolor cupidatat anim laboris qui. Eu ut sit ut cupidatat. Lorem occaecat aliquip sit et. Veniam do deserunt sint sunt ad et minim nulla in. Et cupidatat culpa nostrud laboris officia fugiat laboris anim excepteur.
</p></div>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>推荐阅读
- c# - 在这种情况下如何使用快捷操作符 (?. ??)？
- directory - 如何编写 ansible 脚本来查找目录是否已挂载？
- java - 如何确保抛出 HttpClientErrorException 会导致 HTTP 400 响应？
- python - 有没有办法在python中制作显示窗口？
- javascript - 无法在 Angular 8 中使用 write-good npm 模块
- python - Django PostgreSQL - 对单个单词进行模糊搜索
- flutter - 如何使 DataTable 或 PaginatedDataTable 占据其父卡的整个宽度？
- react-native - 如何在 React Native 中使用 AppState 的 Blur 事件
- r - 在基本图形R中围绕特定面板绘制一个矩形
- c# - 如何使用字段 ID 从 SQL Server DB 获取字段名