代码之家 › 专栏 › 技术社区 › capser

html css浮动不在图像顶部环绕,

css html

capser · 技术社区 · 6 年前

我在段落右侧浮动图像 margin-top: 70px .

文本在图像下浮动,但不在图像上浮动。

如何使文本在图像顶部流动,如提供的图像中的红色矩形所示。我在屏幕截图中添加了红色矩形,它不是html或css的本机。

.floatright {
  float: right;
  border: 1px solid black; 
  margin-top: 70px; 
}

img {
  width: 100px;
  height: 100px;
}

<p>
  <img class="floatright" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Regular_polygon_3_annotated.svg/1200px-Regular_polygon_3_annotated.svg.png" alt="foo"/>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

3 回复 | 直到 6 年前

Rahul 6 年前

你可以通过 shape-outside

div {
    float: left;
    border: 1px solid black;
    margin-top: 50px;
    width: 150px;
    shape-outside: border-box;
}
img{
  max-width: 100%;
}
p{
  float:none;
}

<div>
  <img class="floatright" src="https://cdn-images-1.medium.com/max/2000/1*kOuvkQUrByiaqZYTZFJz4g.png" alt="foo"/>
</div>
<p>
Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.

Lorem ipsum dolor sit amet, cu quo duis aperiam, id has ferri placerat suavitate. Vis oratio bonorum ei, discere delicata pro no. Erant maiestatis et cum. Est iusto veritus et, liber tollit sensibus his eu. Eam cu errem persius.

Sumo accusata eam id. Te expetenda iudicabit delicatissimi ius. Nec ut laoreet argumentum, sed ad erat libris. Vim ullum omnium te. Mel mazim noster delicatissimi no, conceptam philosophia vim ea, vix esse soleat mucius in. Ne quod explicari pri, eam diceret nonumes accumsan id.


 </p>

供参考的JU css shape 缺乏支持 IE 和 Edge

https://caniuse.com/#feat=css-shapes

Stender 6 年前

你需要的是利用, shape outside 在图像上。

如果你能 border-radius 在这里,它也适用于椭圆。

另外-注意我把你的图片放在段落外面/旁边

.yourImage {
    width: 400px;
    height: 250px;
    /* border-radius: 50%; */
    float: right;
    shape-outside: content-box;
    padding: 10px;
    background-color: MediumPurple;
    background-clip: content-box;
    margin-top: 50px;
    display: inline-block;
}

<img class="yourImage" src="whatever">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

-1

Thalles Rangel 6 年前

看看代码:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Float basic</title>
<style> 
.body{
    margin: 0;
    padding: 0px;
}
 .floatright { float: right;
               border: 1px solid black; 
               margin-top: 10px ; 
               height: 150px;
               width: auto;
                } 
}

#txt1{
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}


</style> 

</head>

<body>
<img class="floatright" src="img.png" alt="Java"/>
<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="txt1">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

enter image description here