Question

p on after img. But why margin-left doesn't work?

我为img写了display:block和float:left。 margin-left for p。全部在div中。为什么在img上使用p？

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        body {
            background-color: midnightblue;
            font-family: Arial, Helvetica, sans-serif;
            color: white;
        }

        .img2 {
            width: 200px;
            float: left;
        }

        .content p {
            margin-left: 30px;
        }

<div class="content">
        <div>
            <img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw7Pnm4-SCq3puS-je9jG5AwQSF77oPe_ORrg7ot0gq9QDPQPt" alt="Rasm topilmadi">
        </div>
        <p>Lorem ipsum dolor sit amet,
            consectetur
            adipisicing elit.
            Omnis asperiores hic
            voluptatum labore optio nobis
            accusantium vitae. Non, a! Enim error facilis a. Nam quibusdam qui excepturi facere consequatur
            voluptatibus.</p>
    </div>

为什么margin-left不起作用？ codepen解决我的问题

Answer 1

p元素为display : block，现在为全角（视口的100％），您应该将其更改为width : calc(100% - [width of image])，也应将其更改为float : left以显示在img旁边，现在您可以使用padding-left : 30px作为您的p

<img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw7Pnm4-SCq3puS-je9jG5AwQSF77oPe_ORrg7ot0gq9QDPQPt" alt="Rasm topilmadi">

<p style="float: left;width: calc(100% - 200px);padding-left: 30px;"> Lorem ipsum dolor sit amet....</p>

Answer 2

我重写了您的代码，希望您觉得它有用。

int [][]

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*img {display: block;}*/

body {
	background-color: midnightblue;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
}

.content {
	width: 100%; /* The width you want */
	overflow: hidden;
}

.content .image {
	width: 100%; /* The width you want */
	overflow: hidden;
	display: block;
}

.content .image img {
	width: 200px;
	float: left;
}

.content .image p {
	/* 100% - the width of the image and margin-left */
	width: calc(100% - 230px);
	float: left;
	margin-left: 30px;
}

或... 您可以通过“ Flex”列执行此操作

<div class="content">
	<div class="image">
		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRw7Pnm4-SCq3puS-je9jG5AwQSF77oPe_ORrg7ot0gq9QDPQPt" alt="Rasm topilmadi">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur, maiores consequatur at nihil laborum doloremque cupiditate, quis quae quisquam, facere totam possimus praesentium aspernatur sequi nobis delectus quod iste.</p>
	</div>
</div>

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*img {display: block;}*/

body {
	background-color: midnightblue;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
}

.image {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}
.column img {max-width: 100%;}
.column.big {
	flex: 2;
	align-items: center;
	justify-content: center;
	padding-left: 30px;
}

Answer 3

在图像中添加“ margin-right：30px”，而不是在p标签中添加“ margin-left：30px”

.img2 {
  width: 200px;
  float: left;
  margin-right:30px;
}

Answer 4

这是应该向左浮动的方式。如果将左边缘设置为 220px ，您会看到p标签有空白。我想您想改为在img-tag上添加一个margin（-right）。

请注意，将float: left;添加到p标签也将解决您的问题，因为所有包含float: left;的子节点只是从左到右堆叠在div元素内。

在img之后打开。但是，为什么左边距不起作用？

4 个答案: