разрыв строки на две равные колоннах с помощью двух пролетов

-1

Ниже приведен мой простой HTML:разрыв строки на две равные колоннах с помощью двух пролетов

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<span style="display:inline-block;width:49%;text-align:center"> some text</span> 
       <span style="display:inline-block;width:49%;text-align:center"> some text</span> 

</body> 
</html>

Я хочу, чтобы строка должна быть разделена на 2 равные пространства/столбцов, но когда я использую ширину 50%, второй диапазон доходит до следующий ряд.

Что я сделал?

фиксированный обе ширины до 49%, тогда он работает, но я хочу, чтобы пространство делилось поровну на 50%.

Что мне не хватает?

источник

2017-01-24 Sandeep Sharma

круто ... Приятно знать об этой проблеме .. –

-1

добавить float:left

Проверить это JSFiddle

источник

2017-01-24 06:58:21 Karuppiah

Great .. ли вы объяснить, с какой-то рассуждения? –

Использование Flex

.wrap{ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.block-a{ 
 
    width:50%; 
 
    background:green; 
 
    
 
} 
 

 
.block-b{ 
 
    width:50%; 
 
    background:gold; 
 
    
 
}

<div class="wrap"> 
 

 
<span class="block-a"> some text</span> 
 
<span class="block-b"> some text</span> 
 

 
</div>

Использование Flot

.block-a{ 
 
    width:50%; 
 
    background:green; 
 
    float:left; 
 
    
 
} 
 

 
.block-b{ 
 
    width:50%; 
 
    background:gold; 
 
    float:right; 
 
}

<div class="wrap"> 
 

 
<span class="block-a"> some text</span> 
 
<span class="block-b"> some text</span> 
 

 
</div>

источник

2017-01-24 07:01:41

разрыв строки на две равные колоннах с помощью двух пролетов

ответ

Смежные вопросы