如何使包含圖像的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; 
} 

如果您有所幫助贊成票我:)