主页 / 问题 / 599204
Accepted
ilya1099
Asked:2020-12-04 01:59:22 +0000 UTC2020-12-04 01:59:22 +0000 UTC

在一行中显示 <div>

  • 772

我有一张带有功能area和文字的图片。内容必须在一行上（我用过display: inline-block;），但事实证明对齐是根据文本发生的，图像被放置在不同的层次上（附上屏幕）。

在此处输入图像描述

如何做到按图片对齐，文字往下走？

<body>
  <div style="display: inline-block;">
    <img id="img" src="folder.svg" width="100" height="100" usemap="#Navigation" align="top" />
    <p id="txt">Текст1</p>
  </div>
  <map name="Navigation">
    <area shape="rect" coords="0, 0, 100, 100" href="uroki/test.html" />
    <div style="display: inline-block;">
      <img id="img1" src="folder.svg" width="100" height="100" usemap="#Navigation1" align="top" />
      <p id="txt1">Текст2</p>
    </div>
    <map name="Navigation1">
      <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
      <div style="display: inline-block;">
        <img id="img2" src="folder.svg" width="100" height="100" usemap="#Navigation2" align="top" />
        <p id="txt2">Текст
          <br>номер
          <br>3</p>
      </div>
      <map name="Navigation2">
        <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
        <div style="display: inline-block;">
          <img id="img3" src="folder.svg" width="100" height="100" usemap="#Navigation3" align="bottom" />
          <p id="txt3">Текст
            <br>номер
            <br>4</p>
        </div>
        <map name="Navigation3">
          <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
          <div style="display: inline-block;">
            <img id="img4" src="folder.svg" width="100" height="100" usemap="#Navigation4" align="bottom" />
            <p id="txt4">Текст
              <br>номер
              <br>5</p>
          </div>
          <map name="Navigation4">
            <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
            <div style="display: inline-block;">
              <img id="img5" src="folder.svg" width="100" height="100" usemap="#Navigation5" align="bottom" />
              <p id="txt5">Текст
                <br>номер
                <br>6</p>
            </div>
            <map name="Navigation5">
              <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
              <div style="display: inline-block;">
                <img id="img6" src="folder.svg" width="100" height="100" usemap="#Navigation6" align="bottom" />
                <p id="txt6">Текст 7</p>
              </div>
              <map name="Navigation6">
                <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
</body>

html

2 个回答

  1. 添加垂直对齐：顶部；div解决了问题（在示例中，保留了原始布局）：

    <body>
  <div style="display: inline-block; vertical-align: top;">
    <img id="img" src="folder.svg" width="100" height="100" usemap="#Navigation" align="top" />
    <p id="txt">Текст1</p>
  </div>
  <map name="Navigation">
    <area shape="rect" coords="0, 0, 100, 100" href="uroki/test.html" />
    <div style="display: inline-block; vertical-align: top;">
      <img id="img1" src="folder.svg" width="100" height="100" usemap="#Navigation1" align="top" />
      <p id="txt1">Текст2</p>
    </div>
    <map name="Navigation1">
      <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
      <div style="display: inline-block; vertical-align: top;">
        <img id="img2" src="folder.svg" width="100" height="100" usemap="#Navigation2" align="top" />
        <p id="txt2">Текст
          <br>номер
          <br>3</p>
      </div>
      <map name="Navigation2">
        <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
        <div style="display: inline-block; vertical-align: top;">
          <img id="img3" src="folder.svg" width="100" height="100" usemap="#Navigation3" align="bottom" />
          <p id="txt3">Текст
            <br>номер
            <br>4</p>
        </div>
        <map name="Navigation3">
          <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
          <div style="display: inline-block; vertical-align: top;">
            <img id="img4" src="folder.svg" width="100" height="100" usemap="#Navigation4" align="bottom" />
            <p id="txt4">Текст
              <br>номер
              <br>5</p>
          </div>
          <map name="Navigation4">
            <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
            <div style="display: inline-block; vertical-align: top;">
              <img id="img5" src="folder.svg" width="100" height="100" usemap="#Navigation5" align="bottom" />
              <p id="txt5">Текст
                <br>номер
                <br>6</p>
            </div>
            <map name="Navigation5">
              <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
              <div style="display: inline-block; vertical-align: top;">
                <img id="img6" src="folder.svg" width="100" height="100" usemap="#Navigation6" align="bottom" />
                <p id="txt6">Текст 7</p>
              </div>
              <map name="Navigation6">
                <area shape="rect" coords="0, 0, 100, 100" href="uroki/form.html" />
</body>

    • 2
  2. Best Answer

    该问题可以通过多种方式解决。

    1. 添加float: left;所有div
    2. 添加display: block; float: left;到所有地图

    3. 将所有这些包装在一个单独的 div 中，并为所有地图分配以下样式：

      display: inline-block;
vertical-align: top;

    4. （我最喜欢的）使用 flexboxes。将所有内容包装在一个单独的 div 中，并为其指定以下样式：

      display: flex;
align-items: middle;

    是的，您正确地指向了未闭合的配对地图标签

    • 1

相关问题