Отображать только два изображения в каждой строке

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%, похоже, не применяется. Как я могу отображать изображения два на два вместо того, чтобы все они отображались в одной строке?

Answer 1

Поплавок не может работать, потому что элементы не вписываются в строку. Вы установили запас. Полная ширина элемента - ширина + margin-left + margin-right. Это должно быть меньше 50%

Answer 2

Вместо использования float везде, попробуйте использовать таблицу HTML с двумя строками и двумя столбцами.

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

Затем установите все ячейки таблицы шириной 50%, используя CSS.

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

Вы добавили ширину в два раза, с процентом и пикселей, вы должны удалить, что:

.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 и дать окно калибровки внешних пунктов пропуска чтобы убедиться, что границы взяты изнутри, см. эту скрипку. 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

Ваша главная проблема заключается в том, что у вас есть два width свойства на правила CSS для .main. Вы установка width на 50%, а затем отвергая его снова через несколько строк до значения 306px:

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

Во-вторых, 10px границы, что вы претендуете на ваш .main элемент не будет принято в если ширина 50% вычисляется, и поэтому ваши элементы будут 20px (2 x 10px) более 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>