我试图使图像浮在段落的两边。但是,当我这样做时,只有左侧img保持对齐,而第二个仅位于文本下方。我该如何解决?
<img class="logo-imgl" src="img/logo.png" height= 300px width= 400px />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>
<img class="logo-imgr" src="img/logo.png" height= 300px width= 400px />
这是CSS:
.logo-imgl{
float:left;
}
.logo-imgr{
float:right;
}
最佳答案
将两个图像放在段落之前。我将两个尺寸都更改为仅30px的宽度,以使其能够正确显示在摘要中。
.logo-imgl{
float:left;
}
.logo-imgr{
float:right;
}
<img class="logo-imgl" src="img/logo.png" height="30" width="40" />
<img class="logo-imgr" src="img/logo.png" height="30" width="40" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies nisl ut leo interdum cursus. In interdum ipsum dui, id faucibus tellus consequat nec. Fusce viverra hendrerit diam, eget ultrices lacus. Sed porta, ex ut auctor dignissim, arcu ante condimentum justo, et cursus sem metus et purus. Pellentesque imperdiet ligula et blandit tristique. Proin placerat suscipit nisi vel viverra. Proin nec neque ut dolor blandit tincidunt id eget ligula. Mauris et tortor at leo pretium lacinia.</p>
关于html - 文字两边的 float 图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36360965/