Не удается отобразить более двух элементов

Question

Я делаю веб-страницу, и для ее части я хочу отобразить три объекта в одной строке. Лучшее, что я мог сделать, это сделать 2 из них с помощью width:100%.

Есть ли у кого-нибудь советы, которые я могу попробовать, чтобы он показывал 3/4? На данный момент у меня есть 5 предметов, это 2 строки. Элементы, которые я использую, сделаны в виде списка.

Просмотр в браузере:

---

Мой CSS:

Answer 1

, поскольку вы не обеспечивают никакого кода, ни каких-либо более подробную информацию о вашей рамках

можно разделить столбцы в равной степени как ниже

.container{ 
 
    width: 100%; 
 
} 
 
.container div{ 
 
    width: 30%; 
 
    border: 1px solid #ddd; 
 
    height: 100px; 
 
    float: left; 
 
    margin: 1px; 0; 
 
}

<div class="container"> 
 
    
 
    <div>some text</div> 
 
    <div>some text</div> 
 
    <div>some text</div> 
 
    
 
</div>

Answer 2

Вот один из способов сделать это, но помните, есть целые структуры, как Bootstrap, Foundation и Skeleton (чтобы назвать несколько), что упростит их, и они придут со своими классами «три столбца» и любыми другими вариантами из двенадцати столбчатой ​​сетки, которые вы можете иметь, от одного до двенадцати. с множеством других функций, которые вам, возможно, не нужны, однако, подумайте об этом, если вы идете в рамки маршрута.

Но если вы просто хотите, три столбца в строке, попробуйте следующее:

* { 
 
-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    clear: both; 
 
} 
 

 
.container { 
 
    max-width: 1200x; 
 
    } 
 

 
.row .onethird { 
 
width: 33%; 
 
    background: blue; 
 
    float: left; 
 
    color: white; 
 
    padding: 0 1em; 
 
}

<div class="container"> 
 
<div class="row"> 
 
<div class="onethird">THING ONE</div> 
 
<div class="onethird">THING TWO</div> 
 
<div class="onethird">THING THREE</div> 
 
    </div> 
 
</div>

Протест это вам нужно использовать видовой метатег в голове вашего HTML документа в порядке чтобы начать делать отзывчивые вещи с помощью этого кода.

Answer 3

ul.products {width: 100%; margin: 0; padding: 0;} /* adjust as needed */ 
ul.products li {float: left; width: 33.3%; width: calc(100%/3); margin: 0; padding: 0;} /* the calculation is for browsers that support it. The 33.3% is for the browsers that don't. */ 
ul.products:after {clear: left; display: table; content: ''} /* always clear your floats */