html - 每行仅显示两个图像

Question

我有 4 张图片，希望每行显示 2 张。它们每个都有一个 width:50% 和一个 float:left。

HTML

<section class="opportunity">
   <div class="main">
       <img src="phone.jpg" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>       
    <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="clearfix"></div>
</section>

CSS:

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
   .main:active .content{
   -webkit-transform: translateY(-340px);
   -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 306px;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
 }
 img{
   height:inherit;
   width:inherit;
   -webkit-transition: -webkit-transform 5000ms;
 }
 button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;    
 }
 button:hover
 {
  opacity: 0.5;
 }

问题是所有图像都显示在同一行中。 width:50% 似乎没有应用。 我怎样才能两两显示图像而不是将它们全部显示在同一行？

Answer 1

你添加了两次宽度，百分比和像素，你应该删除它:

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.some-container {
   float:left;
 width:50%;
 position: relative;
}
.main{

 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
   .main:active .content{
   -webkit-transform: translateY(-340px);
   -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 306px;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
 }
 img{
   height:inherit;
   width:inherit;
   -webkit-transition: -webkit-transform 5000ms;
 }
 button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;    
 }
 button:hover
 {
  opacity: 0.5;
 }

<section class="opportunity">
  <div class="some-container">
   <div class="main">
       <img src="phone.jpg" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
    
    </div>
    </div>
   </div>       
    <div class="some-container">
    <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   </div>
     <div class="some-container">
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>   
   </div>
     <div class="some-container">
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>   
   </div>
   <div class="clearfix"></div>
</section>