Question

我目前正在开发一个带有bootstrap的自适应wordpress主题，但是我遇到了以下问题，即我有三个div彼此相邻，并且有一个特色图像填充了整个div。

特色图片本身已经响应，但由于某种原因我的div不是，除非我使用宽度：33％;对于第一和第三div和宽度：34％;为第二个div。但是当我这样做时，我得到一个1像素宽的第三个div的右边的垂直线，因为这些百分比一起只填充1039个像素而不是1040个像素。在每个div上使用span4类也不起作用，因为它会在容器的右侧产生很大的间隙。

所以包装器的宽度为1040像素，包含三个div。每个div都包含一个特色图像。

我想要实现的是，三个图像在缩放时彼此相邻，并且它们仅在移动版本上彼此浮动。但是现在，当页面缩放时，它们会立即跳到彼此之下。

您可以在http://makramedia.beta-projects.nl访问该网站，在向下滚动时，您会在标签幻灯片显示下方看到这三个图片。

我真的希望有人可以帮我解决这个问题。非常感谢提前！

你真诚的，

克里斯蒂安

这是我的html标记：

<section id="project-section" class="row-fluid content" role="main">
    <?php global $query_string; // required ?>
    <?php query_posts('category_name=projecten&showposts=3&order=DESC'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="project">
        <a href="<?php echo get_permalink(); ?>">
            <img class="project-icon" src="<?php bloginfo('template_directory') ?>/img/project-icon.png">
            <?php if ( has_post_thumbnail() ) {          
                the_post_thumbnail('projecten3-thumb', array( 'class' => "project-img"));
            } ?>
        </a>
    </div>
        <?php endwhile; else: ?>
            <p>There are currently no news items availlable.</p>
        <?php endif; ?>
        <?php wp_reset_query(); ?>
    <div class="clearfloat"></div>
</section>

这是我的CSS：

#project-section {
    position: relative;
    display: block;
    height: auto;
    max-width: 1040px;
    margin: 0;
    padding: 0;
    background: #111421;
    overflow: hidden !important;
}

.project {
    display: inline-block;
    position: relative;
    float: left;
    width: 100%;
    max-width: 347px;
    max-height: 213px;
    margin: 0;
    padding: 0;
    background: #afafaf;
    overflow: hidden;
}

    .project:nth-child(2) {
        max-width: 346px !important;
    }

.project-img {
    max-width: 100% !important;
    height: auto;
}

.project-icon {
    display: block;
    position: absolute;
    left: -35px;
    margin-top: 80px;
    margin-left: 50%;
    opacity: .8;
    /*transform*/
    -webkit-transform:scale(.9);
    -moz-transform:scale(.9);
    -ms-transform:scale(.9);
    -o-transform:scale(.9);
    transform:scale(.9);
    /*transition*/
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

    #project-section .project:hover .project-icon {
            opacity: 1;
            /*transform*/
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
            -ms-transform:scale(1);
            -o-transform:scale(1);
            transform:scale(1);
            /*transition*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
    }

Answer 1

按如下方式更改CSS以使div包含图像的响应：）

.news-img {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

img {
    width: auto;
    height: auto;   
}

使用此代码将3个图像块对齐成一行

.project {
    display: inline-block;
    position: relative;
    float: left;
    width: 33.365%;
    max-width: 336px;
    max-height: 213px;
    margin: 5px !important;
    padding: 0px;
    background: #afafaf;
    overflow: hidden;
}

如何制作包含图像的div响应

1 个答案: