Question

我有一个卡体，其中包含一个浮动徽标和一个在容器流体中的行

这在Chrome浏览器中完美运行，但在Edge和Firefox中存在意向问题

可以使用徽标的绝对位置，但是我希望文本像在Chrome中一样环绕图像

<div class="card-body" style="max-width: 400px">                            
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
       <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>
    <p class="mb-1 font-weight-bold">ASDASDASDASD</p>
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdf:</div>
        <div class="col">sdfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">safdasdfasdf:</div>
        <div class="col">sdfsadfsadfasdf</div>
      </div>
      <div class="row">
        <div class="col" style="max-width: 6em">sadfasdfsa:</div>
        <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
      </div>
    </div>
</div>

请参见小提琴：https://jsfiddle.net/s2u8y4q0/1/

Answer 1

尝试在CSS代码部分中添加以下行可能有助于解决缩进问题。

.row {margin: 0 -1px;}

修改后的代码：

  <div class="card-body" style="max-width: 400px">                          
    <span class="rounded logo-container" style="float:right;max-width: 40%;">
  <div style="height: 60px; width: 80px;background: red" alt="Logo" ></div>
    </span>



<div class="container-fluid p-0">

<p style="margin:0 13px;"><b>ASDASDASDASD</b></p>

  <div class="row">

    <div class="col" style="max-width: 6em">sadfasdf:</div>
    <div class="col">sdfasdf</div>
    </div>
        <div class="row">
            <div class="col" style="max-width: 6em">safdasdfasdf:</div>
            <div class="col">sdfsadfsadfasdf</div>
    </div>
        <div class="row">
            <div class="col" style="max-width: 6em">sadfasdfsa:</div>
            <div class="col">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
    </div>
  </div>
</div>

Modified JSFiddle link

Edge中的输出：

FireFox中的输出：

引导容器流体与浮动元素碰撞

1 个答案: