一行内的第一张图片比其他图片小html / css

时间：2017-03-04 08:30:18

标签： html css

您好我正在为学院做练习而且我正在制作一个博客但是第一张图片比他们应该的要小，请帮忙

这里是代码：

<div class="container">
            <div class="jumbotron">
                <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1>
            </div>
            <hr class="style-four">
            <div class="row">
                <!-- This Row is the one that is smaller -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>

             <!-- This row is ok-->
             <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
            </div>

这是我的结果的图像： Image here

2 个答案:

答案 0 :(得分：0)

不是100％肯定，但请尝试这样做：您错过了第一行的结尾 </div＆gt; 标记。以及容器类的相同结束标记。

我添加了两个，它应该是：

<div class="container">
    <div class="jumbotron">
        <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1>
    </div>
    <hr class="style-four">
    <div class="row">
        <!-- This Row is the one that is smaller -->
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
    <!-- added the missing end tag -->
    <!-- This row is ok-->
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

你还没有关闭第一个row div，这就是为什么会出现这个大小问题的原因。 您可以在下面找到更新的HTML代码：

<div class="container">
    <div class="jumbotron">
        <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1>
    </div>
    <hr class="style-four">
    <div class="row">
    <!-- This Row is the one that is smaller -->
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
    <!-- This row is ok-->
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
</div>
相关问题
最新问题