我的 div 元素占用的空间比需要的多。我怎样才能摆脱那个空间？答案

【问题标题】：My div element takes more space than required. How can I get rid of that space?我的 div 元素占用的空间比需要的多。我怎样才能摆脱那个空间？
【发布时间】：2021-02-27 14:26:20
【问题描述】：

我正在尝试使图片居中并将文本与其左边缘对齐。

我在想最好的办法是有一个带有width: fit-content 的 div。但是，这是我得到但无法解决的有趣问题。

这是我的代码：

HTML 代码：

<div class="container">
            <div class="row">
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/12.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/li.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
            </div>
</div>

CSS 代码：

.row{
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    align-items: center;
}

.column{
    flex: 50%;

}

#imageContainer{

}


#imageContainer{
    width: fit-content !important;
}

#imgWidth{
    width: 70%;
    height: auto;
}

#imageText{
    width: fit-content;
}

我想摆脱 div 中的额外空间，其中包含图像和文本。我该怎么做？

【问题讨论】：

标签： html css image bootstrap-4

【解决方案1】：

这是代码

<div class="container">
            <div class="row">
              <!--  <div class="col-sm text-center"> -->
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/birds.jpg"/>
                        <div class="text-left">
                          <div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
             <!--    </div> -->

               <!--  <div class="col-sm text-center"> -->
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/view.jpg"/>
                        <div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
              <!--   </div> -->

            </div>
</div>

【讨论】：

【解决方案2】：

当您使用引导程序时，最好使用它的类来布局您的文档。在下面的代码中，我发布了我使用的 html 和 css。在 html 标签中，我使用引导类来使 img 标签“响应”并对齐文本和图像。引导文档中的以下链接可能会有所帮助： https://getbootstrap.com/docs/4.4/content/images/

我认为有必要提一下，如果您在代码中使用大量图像，最好使它们的大小相似。例如，它们都有 168px 宽度和 300px 高度。因为如果它们的尺寸不同，您的布局可能会出现一些问题。

在css代码中，我根据我的图片大小添加了“max-width=168px”，你可以将它更改为你的图片宽度。

.imageContainer {
  border: 2px solid #258221;
  max-width : 168px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>center-img</title>

  <!-- links -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
            <div class="row">
               <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/birds.jpg"/>
                        <div class="text-left">
                          <div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/view.jpg"/>
                        <div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

            </div>
</div>

  <script src="js-files/jquery-3.5.1.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

您需要添加图像源和引导程序以使其正常运行。在此处输入图像描述

【讨论】：

如何使列更小？我所有的图片都有固定尺寸，因此我对此没有任何问题。我只需要它们看起来不大，是否有可能制作比图片更小的列并用图片填充它
我添加了“col-sm”类以便更好地展示。如果您不需要，您只能删除它们并在布局中仅使用“.imageContainer”div。
这个答案并没有完全解决我的问题，但是它给了我足够的信息来修复它。我更改了您的代码并添加了一些填充，最终减小了尺寸。

【解决方案3】：

相反，您可以使内容填满可用空间。在这种情况下，让图像填满所有可用空间。

#imgWidth{
    width: 100%;
    height: auto;
}

【讨论】：

是的，但我希望那时变小。在那种情况下，有没有办法从外部元素中减小它们的大小？