Question

关于stackoverflow的第一篇文章，我希望你们能够帮助我。我有一张相应调整大小的图片，但由于我的相对填充为0.5em，我不断得到一些恼人的间距。这意味着我根据窗口大小有两个场景。 1：间距适合，如this或2：由于像this这样的填充，我在底部是一个恼人的空间。

所以我的问题是，有没有办法确保从图像到右边文本的距离与从图像到底部文本的距离相同？我不介意，如果我的图片在高度上有所扩展，那么距离总是一样的。

我尝试过一些不同的div，以及一些不同的响应方法，但我无法得到任何工作。希望你们能帮助我。

HTML：

<div class="panel-body">
                            <div class="img-exp">
                                <img src="http://placehold.it/100x100">
                            </div>
                            <div class="text-exp">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </div>

CSS：

    .panel-body {
    text-align: justify;
    background-color:black;
    padding:0.5em;
}

.img-exp {
    position: relative;
    float: left;
    width:45%;
    overflow:auto;
    height:auto;
    padding:0 0.5em 0.5em 0; /*top right bottom left */
}

.img-exp img{
    max-width: 100%;
    height: auto;
    /*
    height:auto;
    max-width: 100%;*/
}

提前致谢。

Answer 1

这是因为你有padding-bottom: 0.5em而产生的，所以当你看到第二个例子时，如果一条线不完全适合你就会有这个差距。

您需要使用字体大小，行高和图像高度所适合的行数进行完美计算。例如：

想象一下，你的图像是100x100，你的字体大小是10px，你的行高是15px。 100 / 15 = 6.66666666666所以它适合6行文本，最后一行占用0.6行（正常行的60％）。为避免这种情况，您需要进行另一次计算。

如果在同一个计算中，你将行高改为20px，你将获得：100 / 20 = 5，这意味着，5个精确的行，底部没有任何内容，因此文本没有＆＃39;与你的形象留下空隙。

调整大小（响应）时图像与文本（填充）的距离相同

1 个答案: