Question

如何复制此页面的布局？

我想在图像的右侧有一个图像，但是它们之间必须有一个小间距，以使它们看起来不会太拥挤，而在图像的左侧则有文本。请参阅随附的示例页面。

[Image] -space- [Text ]
[Text ] -space- [Image]
[Image] -space- [Text ]

Image With Text Page

Answer 1

这是一个仅答案的链接，因为该链接完美地描述了它：

https://www.w3schools.com/Css/css_float.asp

示例使用CSS LocalBroadcastManager来流图像'Flow'或left。

然后可以使用CSS right或margin在文本和图像之间建立距离。

Answer 2

您好，请使用flex的功能使内容之间的大小和间距相等。flex非常方便且易于使用。我希望它对您有用。

您可以将.my-space-between类用于边距。

.myflex{display:flex; justify-content:space-between; }
.my-inner-item div{flex:1; }
.my-space-between{flex:.1;  }

<div class="myflex">
<div class="my-inner-item">my image will be here </div>
<div class="my-space-between"></div>
<div class="my-inner-item">my text will be here</div>

</div>

<div class="myflex">
<div class="my-inner-item">my image will be here </div>
<div class="my-space-between"></div>
<div class="my-inner-item">my text will be here</div>

</div>

<div class="myflex">
<div class="my-inner-item">my image will be here </div>
<div class="my-space-between"></div>
<div class="my-inner-item">my text will be here</div>

</div>

如何创建侧面（左侧或右侧）具有适当间距的图像

2 个答案: