各行に2枚の画像しか表示しない

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

問題は、画像のすべてが同じ列内に表示されることです。幅：50％は適用されていないようです。 イメージを同じ行に表示する代わりに、2つずつイメージを表示するにはどうすればよいですか？

Answer 1

要素が行に収まらないため、floatは機能しません。あなたはマージンを設定しました。要素の完全な幅はwidth + margin-left + margin-rightです。これは50％より小さくする必要があります

Answer 2

floatの代わりに、2行2列のHTML表を使用してみてください。

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

次に、すべてのテーブルセルをCSSを使用して50％幅に設定します。

Answer 3

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

Answer 4

あなたが割合とピクセルで、幅の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>

Answer 5

あなたは幅が二倍306pxことを削除し、BORDER-サイジングボックスを与える追加されましたこのフィドルを見て、内側から境界線が出ていることを確認してください。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; 
    } 

Answer 6

あなたの主な問題は、あなたが.mainためのCSSルール上の2つのwidth性質を持っているという事実です。あなたはwidth〜50％を設定したが、その後306pxの値に後で再び数行を、それをオーバーライドしている：

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

第二に、あなたは.main要素に適用している10pxのボーダーはに取られることはありません50％の幅が計算された場合、要素は20％（2 x 10ピクセル）で50％よりも広くなります。これを修正するには、 `ボーダー・ボックス」にbox-sizingプロパティの値を設定する必要があります：

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