Heim  >  Artikel  >  Web-Frontend  >  这种浮动在边框边缘的效果怎么做?_html/css_WEB-ITnose

这种浮动在边框边缘的效果怎么做?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:48:371332Durchsuche

像这种效果,请问有没有bootstrap的控件呢?或者用普通的css怎么布局?

回复讨论(解决方案)

图片,  定位

大容器相对定位,图片绝对定位,负值

完全听不懂啊

完全听不懂那你问个球。。。。。div+CSS去学学吧

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p></div>

把arrow里的换成你右上角的图。。

<style type="text/css">*{margin:0;padding:0}.box{position:relative;width:400px;height:300px;background:#fafafa;border:1px solid #ccc;margin:50px 0 0 50px}.arrow{position:absolute;top:-20px;right:0;width:50px;height:50px;background:#f00;color:#fff;}</style>

<div class="box">	<div class="arrow">右上角</div>    <p>中华人民共和国中华人民共和国</p></div>

把arrow里的换成你右上角的图。。
谢谢你的回答

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn