每行仅显示两个图像

时间：2016-07-11 08:54:54

标签： html css

我有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;
 }

问题是所有图像都显示在同一行中。宽度：50％似乎没有应用。 如何逐个显示图像而不是将它们全部显示在同一行？

6 个答案:

答案 0 :(得分：2)

您添加了两倍宽度，百分比和像素，您应该删除它：

.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>

答案 1 :(得分：0)

浮动无法工作，因为元素不适合行。你设定了保证金。元素的完整宽度是宽度+边距 - 左边距+边距右边。那必须小于50％

答案 2 :(得分：0)

不要在任何地方使用float，而是尝试使用包含2行和2列的HTML表格。

<table>
  <tr>
    <td>img1</td>
    <td>img2</td>
  </tr>
  ... etc
</table>

然后使用CSS将所有表格单元格设置为50％宽。

答案 3 :(得分：0)

您正在使用float以及margin:0 auto将main css替换为以下内容; 

.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 }

答案 4 :(得分：0)

您已添加宽度两次删除该306px并提供框大小调整边框以确保边框从内部看到这个小提琴https://jsfiddle.net/pwfucx16/ 

    <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>

样式表是

.clearfix{
      clear: both;
     }
    section{
      text-align: center;
    }
    .main{
     float:left;

     text-align: center;
     border:10px solid white;
     height:306px;
      width:50%;
     margin : 50px auto;
     box-shadow: 0px 0px 25px black;
     overflow: hidden;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
    }
    .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;
     }

答案 5 :(得分：0)

您的主要问题是width的CSS规则中有两个.main属性。您将width设置为50％，但稍后再将其覆盖几行后再调整为306px：

.main{
  float:left;
  width:50%;
  // ...
  width:306px;
  // ...
}

其次，当计算50％宽度时，您将应用于.main元素的10px边框将不会被考虑在内，因此您的元素将比20px（2 x 10px）宽50％ 。要解决此问题，您需要将box-sizing属性值设置为`border-box'：

.main {
    // ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

还有一些其他问题可以解决，但这将解决您所要求的问题。我不确定你到底想要什么，所以当你遇到更多问题时，请随意创建另一个问题并在此链接到它。

以下是我提议的修补程序片段，用于连续显示2张图片：

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.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: 100%;
  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="main">
       <img src="http://placehold.it/650x350" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>       
    <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="clearfix"></div>
</section>

相关问题
最新问题