Div 环绕滚动 Div
Div Wrapping Around Scrolling Div
是否可以在编码中创建它？我的意思是...我看到可以将文本环绕在 div 周围。但是，它似乎对我不起作用，我认为这是因为滚动？是否只能将非滚动文本环绕在 div 周围？
.bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:0px;
background-repeat:no-repeat;
}
.textbgvalka {
width:400px;
height:381px;
padding:169px 50px 50px 50px;
}
.textvalka {
width: 195px;
height:281px;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding-right:5px;
}
.picvalka {
width: 120px;
height:120px;
padding:15px;
float:left;
margin:400px 0px 0px 0px;
background: rgba(255,255,255,.7);
float:left;
}
---
<div class="bgvalka">
<div class="textbgvalka">
<div class="picvalka">
<img src="https://i.imgur.com/99V3jeX.png" width="120">
</div>
<div class="textvalka">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut viverra magna. Etiam non justo augue. Ut accumsan sapien sollicitudin turpis molestie, vel imperdiet nisl cursus. Aenean cursus magna mattis lectus efficitur, id congue mauris hendrerit. Nullam pretium turpis odio, ut tincidunt sapien porttitor sed. Integer elit elit, sagittis a libero id, pulvinar convallis eros. Aliquam ut diam fringilla, semper urna eu, fermentum mauris. Integer sapien nibh, rhoncus vitae orci interdum, interdum facilisis nulla. Sed mattis iaculis dolor sit amet condimentum. Mauris in elit turpis. Ut consequat dignissim leo vel vestibulum. Curabitur rutrum arcu elit, non maximus tellus luctus et. Pellentesque finibus fermentum pellentesque.<br><br>
Maecenas venenatis urna orci, ac eleifend eros iaculis vitae. Donec quis enim suscipit, venenatis dolor eu, feugiat ipsum. Morbi nec metus ut leo ullamcorper aliquam. Curabitur dolor magna, aliquet sit amet posuere nec, dignissim vitae orci. Aenean mattis suscipit quam. Mauris egestas pulvinar enim, pellentesque condimentum massa ullamcorper ac. Sed ac commodo nisi. Integer finibus a sem in ornare. Mauris euismod auctor convallis. Phasellus purus erat, accumsan sed mi eget, sagittis vehicula quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut rutrum dui non lorem dapibus suscipit.<br><br>
Suspendisse pharetra non ligula non luctus. Morbi bibendum ac risus ut ornare. Cras lobortis, nibh at pulvinar iaculis, orci felis ultrices felis, at rutrum odio nibh maximus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nulla eget accumsan sem. Sed mauris orci, aliquam sit amet magna nec, vulputate posuere sem. Mauris vel congue mi, sed consectetur arcu. Cras lobortis odio eu magna sagittis ullamcorper. Integer a ex tincidunt, gravida orci quis, tempus velit. Nullam convallis eleifend lacus accumsan cursus. Etiam auctor sollicitudin ligula, vel efficitur felis mollis et. Maecenas imperdiet porta nibh, sit amet viverra lorem sodales nec. Pellentesque sit amet purus semper, rutrum augue non, hendrerit purus.<br><br>
Donec laoreet fringilla dignissim. Curabitur gravida ligula dui. Aliquam lectus ligula, rutrum ut pretium ac, imperdiet ut elit. Curabitur ac volutpat odio, ac viverra enim. Aliquam erat volutpat. Suspendisse in ultrices diam. In imperdiet est non arcu porttitor, eu eleifend leo eleifend. Curabitur cursus nec augue non dapibus. Maecenas vitae odio varius nisl ultrices cursus ut sed est. Proin laoreet aliquam nibh, ut semper ante egestas a.</div>
</div>
</div>
</center>
这就是我正在尝试使用的代码...我认识到它甚至离 finished/perfected 还差得很远，因为我不断地来回尝试使其工作。 （我将大图片向左翻转，将较小的“Notes/Tag/Outfit”文本向右翻转，这样就不会打断滚动条）
CSS
.bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:170px 0 0;
background-repeat:no-repeat;
}
.textvalka {
width: 270px;
height:280px;
margin: auto;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding:5px;
}
HTML
<div class="bgvalka">
<div class="textvalka">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut viverra magna. Etiam non justo augue. Ut accumsan sapien sollicitudin turpis molestie, vel imperdiet nisl cursus. Aenean cursus magna mattis lectus efficitur, id congue mauris hendrerit. Nullam pretium turpis odio, ut tincidunt sapien porttitor sed. Integer elit elit, sagittis a libero id, pulvinar convallis eros. Aliquam ut diam fringilla, semper urna eu, fermentum mauris. Integer sapien nibh, rhoncus vitae orci interdum, interdum facilisis nulla. Sed mattis iaculis dolor sit amet condimentum. Mauris in elit turpis. Ut consequat dignissim leo vel vestibulum. Curabitur rutrum arcu elit, non maximus tellus luctus et. Pellentesque finibus fermentum pellentesque.<br><br>
Maecenas venenatis urna orci, ac eleifend eros iaculis vitae. Donec quis enim suscipit, venenatis dolor eu, feugiat ipsum. Morbi nec metus ut leo ullamcorper aliquam. Curabitur dolor magna, aliquet sit amet posuere nec, dignissim vitae orci. Aenean mattis suscipit quam. Mauris egestas pulvinar enim, pellentesque condimentum massa ullamcorper ac. Sed ac commodo nisi. Integer finibus a sem in ornare. Mauris euismod auctor convallis. Phasellus purus erat, accumsan sed mi eget, sagittis vehicula quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut rutrum dui non lorem dapibus suscipit.<br><br>
Suspendisse pharetra non ligula non luctus. Morbi bibendum ac risus ut ornare. Cras lobortis, nibh at pulvinar iaculis, orci felis ultrices felis, at rutrum odio nibh maximus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nulla eget accumsan sem. Sed mauris orci, aliquam sit amet magna nec, vulputate posuere sem. Mauris vel congue mi, sed consectetur arcu. Cras lobortis odio eu magna sagittis ullamcorper. Integer a ex tincidunt, gravida orci quis, tempus velit. Nullam convallis eleifend lacus accumsan cursus. Etiam auctor sollicitudin ligula, vel efficitur felis mollis et. Maecenas imperdiet porta nibh, sit amet viverra lorem sodales nec. Pellentesque sit amet purus semper, rutrum augue non, hendrerit purus.<br><br>
Donec laoreet fringilla dignissim. Curabitur gravida ligula dui. Aliquam lectus ligula, rutrum ut pretium ac, imperdiet ut elit. Curabitur ac volutpat odio, ac viverra enim. Aliquam erat volutpat. Suspendisse in ultrices diam. In imperdiet est non arcu porttitor, eu eleifend leo eleifend. Curabitur cursus nec augue non dapibus. Maecenas vitae odio varius nisl ultrices cursus ut sed est. Proin laoreet aliquam nibh, ut semper ante egestas a.
</div>
</div>
是否可以在编码中创建它？我的意思是...我看到可以将文本环绕在 div 周围。但是，它似乎对我不起作用，我认为这是因为滚动？是否只能将非滚动文本环绕在 div 周围？
.bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:0px;
background-repeat:no-repeat;
}
.textbgvalka {
width:400px;
height:381px;
padding:169px 50px 50px 50px;
}
.textvalka {
width: 195px;
height:281px;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding-right:5px;
}
.picvalka {
width: 120px;
height:120px;
padding:15px;
float:left;
margin:400px 0px 0px 0px;
background: rgba(255,255,255,.7);
float:left;
}
---
<div class="bgvalka">
<div class="textbgvalka">
<div class="picvalka">
<img src="https://i.imgur.com/99V3jeX.png" width="120">
</div>
<div class="textvalka">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut viverra magna. Etiam non justo augue. Ut accumsan sapien sollicitudin turpis molestie, vel imperdiet nisl cursus. Aenean cursus magna mattis lectus efficitur, id congue mauris hendrerit. Nullam pretium turpis odio, ut tincidunt sapien porttitor sed. Integer elit elit, sagittis a libero id, pulvinar convallis eros. Aliquam ut diam fringilla, semper urna eu, fermentum mauris. Integer sapien nibh, rhoncus vitae orci interdum, interdum facilisis nulla. Sed mattis iaculis dolor sit amet condimentum. Mauris in elit turpis. Ut consequat dignissim leo vel vestibulum. Curabitur rutrum arcu elit, non maximus tellus luctus et. Pellentesque finibus fermentum pellentesque.<br><br>
Maecenas venenatis urna orci, ac eleifend eros iaculis vitae. Donec quis enim suscipit, venenatis dolor eu, feugiat ipsum. Morbi nec metus ut leo ullamcorper aliquam. Curabitur dolor magna, aliquet sit amet posuere nec, dignissim vitae orci. Aenean mattis suscipit quam. Mauris egestas pulvinar enim, pellentesque condimentum massa ullamcorper ac. Sed ac commodo nisi. Integer finibus a sem in ornare. Mauris euismod auctor convallis. Phasellus purus erat, accumsan sed mi eget, sagittis vehicula quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut rutrum dui non lorem dapibus suscipit.<br><br>
Suspendisse pharetra non ligula non luctus. Morbi bibendum ac risus ut ornare. Cras lobortis, nibh at pulvinar iaculis, orci felis ultrices felis, at rutrum odio nibh maximus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nulla eget accumsan sem. Sed mauris orci, aliquam sit amet magna nec, vulputate posuere sem. Mauris vel congue mi, sed consectetur arcu. Cras lobortis odio eu magna sagittis ullamcorper. Integer a ex tincidunt, gravida orci quis, tempus velit. Nullam convallis eleifend lacus accumsan cursus. Etiam auctor sollicitudin ligula, vel efficitur felis mollis et. Maecenas imperdiet porta nibh, sit amet viverra lorem sodales nec. Pellentesque sit amet purus semper, rutrum augue non, hendrerit purus.<br><br>
Donec laoreet fringilla dignissim. Curabitur gravida ligula dui. Aliquam lectus ligula, rutrum ut pretium ac, imperdiet ut elit. Curabitur ac volutpat odio, ac viverra enim. Aliquam erat volutpat. Suspendisse in ultrices diam. In imperdiet est non arcu porttitor, eu eleifend leo eleifend. Curabitur cursus nec augue non dapibus. Maecenas vitae odio varius nisl ultrices cursus ut sed est. Proin laoreet aliquam nibh, ut semper ante egestas a.</div>
</div>
</div>
</center>
这就是我正在尝试使用的代码...我认识到它甚至离 finished/perfected 还差得很远，因为我不断地来回尝试使其工作。 （我将大图片向左翻转，将较小的“Notes/Tag/Outfit”文本向右翻转，这样就不会打断滚动条）
CSS
.bgvalka {
width: 500px;
height: 600px;
background: #433b34 url(https://i.imgur.com/oRivmFt.png);
padding:170px 0 0;
background-repeat:no-repeat;
}
.textvalka {
width: 270px;
height:280px;
margin: auto;
font-size:10px;
background: transparent;
font-family: 'Manrope', sans-serif;
line-height:10px;
text-align:justify;
color:#000;
overflow:auto;
padding:5px;
}
HTML
<div class="bgvalka">
<div class="textvalka">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut viverra magna. Etiam non justo augue. Ut accumsan sapien sollicitudin turpis molestie, vel imperdiet nisl cursus. Aenean cursus magna mattis lectus efficitur, id congue mauris hendrerit. Nullam pretium turpis odio, ut tincidunt sapien porttitor sed. Integer elit elit, sagittis a libero id, pulvinar convallis eros. Aliquam ut diam fringilla, semper urna eu, fermentum mauris. Integer sapien nibh, rhoncus vitae orci interdum, interdum facilisis nulla. Sed mattis iaculis dolor sit amet condimentum. Mauris in elit turpis. Ut consequat dignissim leo vel vestibulum. Curabitur rutrum arcu elit, non maximus tellus luctus et. Pellentesque finibus fermentum pellentesque.<br><br>
Maecenas venenatis urna orci, ac eleifend eros iaculis vitae. Donec quis enim suscipit, venenatis dolor eu, feugiat ipsum. Morbi nec metus ut leo ullamcorper aliquam. Curabitur dolor magna, aliquet sit amet posuere nec, dignissim vitae orci. Aenean mattis suscipit quam. Mauris egestas pulvinar enim, pellentesque condimentum massa ullamcorper ac. Sed ac commodo nisi. Integer finibus a sem in ornare. Mauris euismod auctor convallis. Phasellus purus erat, accumsan sed mi eget, sagittis vehicula quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut rutrum dui non lorem dapibus suscipit.<br><br>
Suspendisse pharetra non ligula non luctus. Morbi bibendum ac risus ut ornare. Cras lobortis, nibh at pulvinar iaculis, orci felis ultrices felis, at rutrum odio nibh maximus turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In hac habitasse platea dictumst. Nulla eget accumsan sem. Sed mauris orci, aliquam sit amet magna nec, vulputate posuere sem. Mauris vel congue mi, sed consectetur arcu. Cras lobortis odio eu magna sagittis ullamcorper. Integer a ex tincidunt, gravida orci quis, tempus velit. Nullam convallis eleifend lacus accumsan cursus. Etiam auctor sollicitudin ligula, vel efficitur felis mollis et. Maecenas imperdiet porta nibh, sit amet viverra lorem sodales nec. Pellentesque sit amet purus semper, rutrum augue non, hendrerit purus.<br><br>
Donec laoreet fringilla dignissim. Curabitur gravida ligula dui. Aliquam lectus ligula, rutrum ut pretium ac, imperdiet ut elit. Curabitur ac volutpat odio, ac viverra enim. Aliquam erat volutpat. Suspendisse in ultrices diam. In imperdiet est non arcu porttitor, eu eleifend leo eleifend. Curabitur cursus nec augue non dapibus. Maecenas vitae odio varius nisl ultrices cursus ut sed est. Proin laoreet aliquam nibh, ut semper ante egestas a.
</div>
</div>