Question

新手在这里，请帮忙:) 我希望有一个完全响应的div，其中的图像按照snippet.jpg排列。问题在于我无法使布局在所需位置和响应性方面都能正常工作。

图像文件位于此处 https://drive.google.com/folderview?id=0Bz3gVhyJDHHvTE84T2dwSVZKaXc&usp=sharing

以下是我所做的HTML和CSS

    <div class=" container-fluid portfolio-image">

    <div class="inner_container1" >
     <div class="row ">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <img class="img-responsive  " src="images/winter1.png"  alt=""/>
        </div>
      </div>
      </div>

    <div class="inner_container2" >
       <div class="row ">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <img class="img-responsive  " src="images/Woman2.png" alt=""/>
        </div>
      </div>
    </div>


    <div class="inner_container3">
       <div class="row ">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <img class="img-responsive  " src="images/adult2.png"  alt=""/>
        </div>

    </div>

    <div style="clear:both"></div>
    <div class="inner_container4" >
       <div class="row ">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <img class="img-responsive "  src="images/txt background.png" width="400"  alt=""/>
       <p> Portfolio</p>
        </div>
      </div>
    </div>
      </div>

      <div class="inner_container5">
       <div class="row ">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <img class="img-responsive " src="images/feet2.png"  alt=""/>
        </div>
      </div>
    </div>

    </div>

CSS

    .portfolio-image{
    margin:0 !important;
    padding:0!important; 
    }
    .inner_container1 {

    float:left;
    }


    .inner_container2 {
    float:right; 
    }


    .inner_container3 {
    float:left; 
    }


    .inner_container4 {
    float:right;
    paddin:0px;
    margin:0 auto;
    }


    .inner_container5 {
    float:right;
    }



    .no-pad{
     pading:0;
     margin:0;  
    }

Answer 1

Open Window=>Perspectives=>Customize Perspective
Select Menu Visibility tab
Click the '>' in front of File
Uncheck the Revert item
Click OK

不同宽度和高度的图像在响应的div中组合在一起

1 个答案: