响应式设计 - 图像大约偏移侧边菜单的高度

Question

我有以下代码和以下问题：

我有一个侧面菜单和一个主要内容。 Desktop 中的侧面菜单应位于左侧，而公司内容应位于右侧。到目前为止，一切都很好。

但是，一旦我添加了图片（在本例中我将其注释掉了！），侧面菜单就会向下滑动大约图片的大小。似乎只有第一张图片有这种效果，所以这就是我在示例中注释掉的原因，但当然我希望将其投入生产。

我尝试将图片放入 span 中，但这没有帮助...

非常感谢帮助。

我的片段：

.side-menu {
    display: inline-grid;
    width: 20%;
    margin-top: 23px;
    margin-left: 27px;
}
.company-content {
    width: 71%;
    display: inline-grid;
    /*margin-left: 75px;*/
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-2 side-menu" style="padding-left: 0px;min-width: 200px;padding-right: 0px;margin-right:50px;padding-left:0px;margin-left:0px;">
      <ul id="menu-map" class="menu" style="padding-left:0px;">
          <li class=""><a href="/Category" aria-current="page">
            <span>Category</span>
          </a></li>        
          <li class=""><a href="/Subcat1" aria-current="page">
            <span><strong>Subcategory 1</strong></span>
          </a></li>
          <li class=""><a href="/Subcat2" aria-current="page">
            <span>Subcategory 2</span>
          </a></li>
          <li class=""><a href="/Subcat3" aria-current="page">
            <span>Subcategory 3</span>
          </a></li>
          <li class=""><a href="/Subcat4" aria-current="page">
            <span>Subcategory 4</span>
          </a></li>
      </ul>
</div>

<div class="company-content">
  <div class="row">
    <div class="col-sm-6">
        <!-- <span><img src="~/graphics/picture.webp" style="max-width: 350px" /></span> -->
      <b>John Doe</b>
      <br />
      <p>
        <span><b>Text</b></span> <br />
        E-Mail: <span id="email1">loading...</span>
      </p>
      <div class="card" data-person="john">
        <span class="dots"></span>
        <span class="more" style="display: none; color: black"
          ><br />This is a test text. Yup, still testing. <br />
          Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg.</span>
        <button
          type="button"
          onclick="readMore('test')"
          class="Btn btn btn-dark">
          More
        </button>
      </div>
    </div>
    <div class="col-sm-6">
      <span><img src="~/graphics/picture2.webp" style="max-width: 370px" /></span>
      <br />
      <b>Janet Doe</b>
      <br />
      <p>
        <span><b>Text here</b></span
        ><br />
        E-Mail: <span id="test2335">loading...</span>
      </p>
      <div class="card" data-person="janet">
        <span class="dots Btn" onclick="readMore('test2')"></span>
        <span class="more" style="display: none; color: black">
          This is a test text. Yup, still testing.
          <br />
          Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg...</span
        >
        <button
          type="button"
          onclick="readMore('test2')"
          class="Btn btn btn-dark"
        >
          More
        </button>
      </div>
    </div>
  </div>
</div>

Answer 1

如果添加 width: 100%; display: inline-block; 到 span 图像和文本将保存在单独的“行”中。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-sm-6">
        <span style="width: 100%; display: inline-block;"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="max-width: 350px" /></span>
      <b>John Doe</b>
      <br>
      <p>
        <span><b>Text</b></span> <br>
        E-Mail: <span id="email1">loading...</span>
      </p>
      <div class="card" data-person="john">
        <span class="dots"></span>
        <span class="more" style="display: none; color: black"><br>This is a test text. Yup, still testing. <br>
          Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg.</span>
        <button type="button" onclick="readMore('test')" class="Btn btn btn-dark">
          More
        </button>
      </div>
    </div>
    <div class="col-sm-6">
      <span style="width: 100%; display: inline-block;"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" style="max-width: 370px"></span>
      <br>
      <b>Janet Doe</b>
      <br>
      <p>
        <span><b>Text here</b></span><br>
        E-Mail: <span id="test2335">loading...</span>
      </p>
      <div class="card" data-person="janet">
        <span class="dots Btn" onclick="readMore('test2')"></span>
        <span class="more" style="display: none; color: black">
          This is a test text. Yup, still testing.
          <br>
          Teeeeeeeeeeeeeeeeeeesttiiiiiiiiiiiinnnnnnggg...</span>
        <button type="button" onclick="readMore('test2')" class="Btn btn btn-dark">
          More
        </button>
      </div>
    </div>
  </div>

Flexbox 也可以工作。