如何使包含图像的div响应

Question

我目前正在开发具有引导程序的响应式wordpress主题，但我被困在以下问题中，我有三个div彼此相邻，并填充了整个div 。

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

所以包装是1040pixels宽，并包含三个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; 
} 

如果您有所帮助赞成票我:)