Home / Questions / 43347
Accepted
Máxima Alekz
Asked: 2020-01-11 12:06:01 +0800 CST 2020-01-11 12:06:01 +0800 CST

CSS - 在文本之间换行

  • 772

我有以下代码：

p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	height: auto;
}
<p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
.</p>

如何制作边框，或者更确切地说，将p制作为内容的大小。边框“穿过”图像。但我希望边框底部位于图像之后。

html

2 Answers

  1. Best Answer

    这是使用时出现的常见错误，float行话中的解决方案称为clearfix

    在您的情况下，您可以使用：

    overflow: auto;

    例子：

    p{
	border-right: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
	padding-right: 5px;
	padding-bottom: 5px;
	margin: 10px 0;
	overflow: auto;
}
    <p><img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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>

    • 3

  2. 他需要把<p>他float: left，因为图像有float: right; 

    p {
  border-right: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  padding-right: 5px;
  padding-bottom: 5px;
  margin: 10px 0;
  height: auto;
  float: left;
}
    <p>
  <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" style="width: 200px;height: 200px;float:right;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

    • 2