Question

我正在构建一个与bootstrap集成的wordpress网站，并试图做一个特色帖子＆＃34;在博客顶部键入布局以展示或最近的博客帖子。我遇到的问题是它的一行大一半是一个大的特色图像而另一行是嵌套在里面的两行。但是我希望他们总是排队到高度。我希望它看起来像：

以及它看起来像什么：

我在线阅读的所有内容都说在左侧的巨型照片周围放置一个容器div，并为其提供所需的高度和宽度以及溢出：隐藏和实际的<img>宽度为100％但它不适合我。不确定这是否正确，我以前的一些造型是搞乱这个或者我是否需要做其他事情。

所以＆＃34;大照片＆＃34;是我放在<img>标签周围的div。我在网上发现了另一种解决方案，它使用了我尝试的比例类（在我的img标签上）但也没有用。

    <div class="latest-blogs">
    <div class="row">
        <div class="col-md-8">
            <div class="blog-box">
                <div class="big-photo">
                    <img class="featured-image scale" src="<?php echo $posts[0][3]; ?>" alt="" />
                </div>
                <div class="blog-infor">
                    <date><?php echo $posts[0][4]; ?></date>
                    <h3>
                        <a href="<?php echo $posts[0][2]; ?>">
                            <?php echo $posts[0][1]; ?>
                        </a>
                    </h3>
                    <span>
                        <?php echo $posts[0][5]; ?>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <?php for ($i = 1; $i < count($posts); $i++) : ?>
                <div class="blog-box">
                        <img class="featured-image" src="<?php echo $posts[$i][3]; ?>" alt="" />
                    <div class="blog-infor">
                        <date><?php echo $posts[$i][4]; ?></date>
                        <h3>
                            <a href="<?php echo $posts[$i][2]; ?>">
                                <?php echo $posts[$i][1]; ?>
                            </a>
                        </h3>
                        <span>
                            <?php echo $posts[$i][5]; ?>
                        </span>
                    </div>
                </div>
            <?php endfor; ?>
        </div>
    </div>
</div>


    .big-photo {
    max-height: 499px;
    overflow: hidden;
}

.big-photo img {
    width: 100%;
}

.big-photo img.scale {
    /* corrects small inline gap at bottom of containing div */
display: block;
width: 100%; /* corrects obscure Firefox bug */
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
display: block; /* corrects small inline gap at bottom of containing div */
width: 100% /* corrects obscure Firefox bug */
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
/*width: auto\9;
/* ie8+9 - use modernizr instead of this \9 hack */
/* lt ie8 */
-ms-interpolation-mode: bicubic;
/* optionally force a minimum size if img src size is known: */
/* min-height: 320px; /* max-height of .crop-height */
/* min-width: 480px; /* proportional to above */ }

试图让我的引导行在

0 个答案: