时间戳

首页 > 解决方案 > 我无法并排显示 div

html - 我无法并排显示 div

问题描述

我已经进行了大量的研究，但运气不佳。本质上，我试图在大图像旁边的右半部分格式化 4 个图像（2 x 2）。到目前为止，我只能得到四个图像中的两个来显示我想要的方式。我试图让另外两个直接出现在当前两个下方。

这是我添加后两个之前该部分的样子

这是我添加后两个部分后的样子。

这是相关的 HTML：

      <section>
    <div  style="font-style: italic;">

      <div style="float: right;">
        <div class="desc tooltip">
          <img src="image/alpaca.png" alt="alpaca image" class="species" title="Alpaca (Vicugna pacos)">
          <p>Alpaca (Vicugna pacos)</p>
          <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
        </div>
      
        <div class="desc tooltip">
          <img src="image/llama.png" alt="llama image" class="species" title="Llama (Lama glama)">
          <p>Llama (Lama glama)</p>
          <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
        </div>
        
        <div class="desc tooltip">
          <img src="image/vicuna.png" alt="vicuna image" class="species" title="Vicuna (Vicugna vicugna)">
          <p>Vicuna (Vicugna vicugna)</p>
          <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
        </div>
      
        <div class="desc tooltip ">
          <img src="image/guanaco.png" alt="guanaco image" class="species" title="Guanaco (Lama guanicoe)">
          <p>Guanaco (Lama guanicoe)</p>
          <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
        </div>
      </div>

      <img class="tree_diagram" src="image/camelidae tree diagram.png" alt="camelidae tree diagram">

    </div>
  </section>

这是相关的CSS：

.species {
   margin: 5px;
   width: 300px;
   box-shadow: 8px 8px 8px grey;
   border-radius: 20px;
   margin-right: 70px;
}
.tree_diagram {
   width: 45%;
   border-radius: 50px;
   border: 2px solid #101010;
   margin: 1em;
}

我已经有一段时间了；我试过改变相对位置，使用 flex-box，改变显示类型，媒体查询，等等。感谢您提供任何帮助，我尽量保持简洁，所以如果我应该包含任何其他信息，那么我会很乐意这样做。

标签： htmlcss

解决方案

查看引导网格系统

https://getbootstrap.com/docs/4.0/layout/grid/

如果您对引导程序不满意，请查看语义 UI 网格系统，它对初学者来说很容易理解

https://semantic-ui.com/collections/grid.html

如果你想要 CSS，那么试试下面的 CSS

display:inline-block

并改变div的高度和宽度

推荐阅读