Question

我连续有3个div，带有图像和一些文字。一个div的文本比另一个短。当我调整浏览器大小并且只有一个div中的文本进入新行时（所以一个div有两行文本而其他一行只有一行），文本行较少的div在顶部获得额外的余量。但是，当我打开“检查元素”时，数字中没有任何错误。

这就是我所说的

这是html：

<div id="ribolovna_mjesta" class="content ne_naslovna">


                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Karas" Peklenica  </h4>
                    </div>
                </div>
                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Karas" Peklenica </h4>
                    </div>
                </div>
                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Diver" Podbrest i Sveti Križ </h4>
                    </div>
                </div>
                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Karas" Peklenica <br /> </h4>
                    </div>
                </div>
                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Karas" Peklenica </h4>
                    </div>
                </div>
                <div class="drustvo_wrapper">
                    <div class="inner">
                        <img src="img/FOTF0A9.jpg" class="img-responsive">
                        <h4>SRD "Karas" Peklenica </h4>
                    </div>
                </div>

        </div>

SASS

#ribolovna_mjesta
        text-align: center
        width: 100%


        .drustvo_wrapper
            display: inline-block
            width:30%
            min-width: 125px
            min-height: 205px
            margin: 5px


            .inner          
                padding: 10px

尝试删除带有注释和负边距和单词间距的div之间的空格......没有帮助......它给了我相同的结果..

接下来应该尝试什么？

提前致谢

Answer 1

你看过Box-sizing property了吗？

我认为你可以，但没有嵌入代码，我无法测试

内联块边际问题

1 个答案: