Question

我试图让图像浮动在一个段落的两边。但是，当我这样做时，只有左边的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;
}

Answer 1

将两张图片放在段落之前。我将两种尺寸都更改为仅30px的宽度，以便在代码段中正确显示。

＆＃13;

.logo-imgl{
    float:left;
}
.logo-imgr{
    float:right;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试将其置于BOOSTRAP

  <div class="container">
      <div class="row">
        <div class="col-md-4">
          <img class="logo-imgl" src="img/logo.png" height="30" width="40" />
        </div>
        <div class="col-md-4">
          <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>
        </div>
        <div class="col-md-4">
          <img class="logo-imgl" src="img/logo.png" height="30" width="40" />
        </div>
      </div>
    </div>

浮动文本两侧的图像

2 个答案: