Четыре столбца в строке

Question

У меня есть четыре небольших изображения подряд, например, меню на стартовой странице, которое переходит на дополнительные страницы. Изображения, помещенные как это:

пространства изображений изображение пространства изображение пространство изображение

Но я не получаю equl пространство до последнего изображения! Есть ли способ решить это? Все изображения помещаются в контейнер шириной 100%.

Я использую CSS, как это:

.one-fourth { 
width: 24%; 
float: left; 
margin-right: 1%; 

} 

.last { 
margin-right: 0%; 
float: right; 
} 

Четвертый и последний образ также имеет класс .last

Answer 1

Без примера это трудно. Но работает ли это для вас?

.one-fourth { 
width: 24%; 
float: left; 
margin-right: 1%; 
box-sizing: border-box; 
} 
.one-fourth:last-child { 
margin-right:0%; 
} 

Answer 2

Существует простой способ кросс-браузер, чтобы сделать это с помощью text-align: justify:

На контейнере и все дети:

.container { 
    text-align: justify; 
} 

.container > * { 
    display: inline-block; 
} 

Теперь создайте в конце вашего контейнера еще один элемент , например DIV с классом на последней текстовой строки:

.last-text-line { 
    width: 100%; 
} 

Это заставит ваши изображения, чтобы растянуть на всю ширину контейнера с автоматически сгенерированных полей. Вам даже не нужно будет разделять их по классам.

Fiddle

Как это работает: оправдает пытается растянуть текст по ширине заданной. Но последняя строка всегда не растягивается. Это фиксируется нашим последним элементом со 100% шириной - он становится последней строкой, а приведенные выше строки растянуты до заданной ширины.

Answer 3

ваш last класс плавает правильно ... и вы не установили ширину явно для класса last ... this работал для меня

.one-fourth { 
width: 24%; 
float: left; 
margin-right: 1%; 
} 

.last { 
width: 25%; 
float: left; 
margin-right: 0%; 
} 

Answer 4

Простой способ сделать это состоит в использовании Flexbox. Просто установите родительский набор в display: flex и justify-content: space-between. Все дети будут установлены в ряд (настройка по умолчанию для Flexbox). Просто установите ширину каждого изображения чуть менее 25%. В противном случае между ними нет места. Если вы действительно хотите ровно 1% между каждым, то установите ширину с помощью calc до width: calc(97%/4).

Я использовал простой сброс css, чтобы сделать эффект более понятным.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
section { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.one-fourth { 
 
    width: calc(97%/4); 
 
}

<section> 
 
    <img src="http://lorempixum.com/200/200/city" alt="Lorem Ipsum" class="one-fourth"/> 
 
    <img src="http://lorempixum.com/200/200/sports" alt="Lorem Ipsum" class="one-fourth"/> 
 
    <img src="http://lorempixum.com/200/200/people" alt="Lorem Ipsum" class="one-fourth"/> 
 
    <img src="http://lorempixum.com/200/200/nature" alt="Lorem Ipsum" class="one-fourth"/> 
 
</section>

Более подробную информацию о Flexbox вот snippet от CSS-уловок, и support tables.

Answer 5

Это, как я хотел бы сделать это:

.wrapper { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.wrapper:before, 
 
.wrapper:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.wrapper:after { 
 
    clear: both; 
 
} 
 
.one-fourth { 
 
    width: 24%; 
 
    float: left; 
 
    margin-right: 1.333333%; 
 
    background: red; 
 
    height: 100px; 
 
    margin-bottom: 1.333333%; 
 
} 
 
.last { 
 
    margin-right: 0; 
 
}

<div class="wrapper"> 
 
    <div class="one-fourth">asasdasds</div> 
 
    <div class="one-fourth">rtzrtzrtzr</div> 
 
    <div class="one-fourth">uizuizui</div> 
 
    <div class="one-fourth last">xcvxcvxcvxcv</div> 
 
    <div class="one-fourth">dsfsdfsfsfsdf</div> 
 
    <div class="one-fourth">xcvxcvxvc</div> 
 
    <div class="one-fourth">werwrewerwe</div> 
 
    <div class="one-fourth last">werwerwer</div> 
 
    <div class="one-fourth">werwerwe</div> 
 
    <div class="one-fourth">werwrwerwe</div> 
 
</div>