HTML CSS предотвращает разрыв контейнеров с диапазоном

Я сделал этот маленький пример, который показывает мою проблему. У меня есть несколько пролетных контейнеров и если два находятся в колонке, чем контейнер поверочного немного больше, чем один, где только один пролет контейнер:HTML CSS предотвращает разрыв контейнеров с диапазоном

My JS Fiddle Example

<span class="times"> 
    <span class="timeType cursorPointer"> 
     <span>D</span> 
     </span> 
     <span> 
      09:00 - 12:00 
     </span>  
    </span> 
    <span class="times"> 
     <span class="timeType cursorPointer"> 
      <span>N</span> 
      </span> 
      <span> 
       14:00 - 17:00 
      </span> 
     </span>

Кто-нибудь знает, как предотвратить это? Так что это должно быть предотвращено:

источник

2016-02-19 quma

S o что вам нужно, чтобы это выглядело? –

Я думаю, что ваше предположение о первопричине может быть неправильным. Разница в ширине заключается в том, что она определяется шириной * символов * в тексте. Попробуйте использовать шрифт с фиксированной шириной, чтобы понять, что я имею в виду. – Jeroen

@Jeroen Я согласен с вами, но пространство в конце строки все еще присутствует. Вы можете просмотреть в этом отредактированном скрипке с моноширинным шрифтом: https://jsfiddle.net/2xjm7ywq/1/ –

.times { 
    padding: 2px; 
    margin-left: 2px; 
    border: 1px solid #ddd; 
    color: #000; 
    background-color: #fff; 
    display: inline-block; 
}

Заменить CSS с этим, и он должен работать :)

А если вы имеете в виду ту же ширину, то вы должны определить ширину & bull:

.times { 
     padding: 2px; 
     margin-left: 2px; 
     border: 1px solid #ddd; 
     color: #000; 
     background-color: #fff; 
     display: inline-block; 
     min-width: 110px; 
     text-align: center; 
}

Заменить это :)

источник

2016-02-19 12:29:16

Это правильный ответ, но, может быть, вы можете объяснить немного, чтобы вырастить upvotes и объяснить OP почему –

Нет .. это не так. Это связано с различием в размерах персонажей. –

Да, но теперь у них одинаковые прокладки. –

вы можете установить min-width на пролет, так что независимо от одного символа, span будет такого же размера.

Inline-block требуется для калибровки.

.times { 
    padding: 2px; 
    margin-left: 2px; 
    border: 1px solid #ddd; 
    color: #000; 
    background-color: #fff; 
    display: inline-block; 
} 

span span { 
    display: inline-block; 
    min-width: 1em; 
}

Поймите, что это происходит от характера используемого ...

Иначе вы можете использовать другое семейство шрифтов (W3C font-family: see monospace), где это не будет происходить, например, courier

уведомления использование inline-block, чтобы каждая коробка вела себя как простая штука/обертка в потоке.

.times { 
 
    padding: 2px; 
 
    margin-left: 2px; 
 
    border: 1px solid #ddd; 
 
    color: #000; 
 
    background-color: #fff; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.times { 
 
    font-family: courier; 
 
}

<table class="weekTable"> 
 
    <tr> 
 
    <th></th> 
 
    <tr> 
 
     <td> 
 
     <span> 
 
\t \t \t \t \t \t <span class="times"> 
 
\t \t \t \t \t \t \t <span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)"> 
 
\t \t \t \t \t \t \t \t <span>D</span> 
 
     </span> 
 
     <span> 
 
\t \t \t \t \t \t \t \t 09:00 - 12:00 
 
\t \t \t \t \t \t \t </span> 
 
     </span> 
 
     <span class="times"> 
 
\t \t \t \t \t \t \t <span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)"> 
 
\t \t \t \t \t \t \t \t <span>N</span> 
 
     </span> 
 
     <span> 
 
\t \t \t \t \t \t \t \t 14:00 - 17:00 
 
\t \t \t \t \t \t \t </span> 
 
     </span> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <span> 
 
\t \t \t \t \t \t <span class="times"> 
 
\t \t \t \t \t \t \t <span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)"> 
 
\t \t \t \t \t \t \t \t <span>M</span> 
 
     </span> 
 
     <span> 
 
\t \t \t \t \t \t \t \t 09:00 - 12:00 
 
\t \t \t \t \t \t \t </span> 
 
     </span> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
</table>

https://jsfiddle.net/q3jgytoq/4/

источник

2016-02-19 12:33:00

можно решить, добавив фиксированную ширину, чтобы охватить и display:inline-block

.times { 
      padding: 2px; 
      margin-left: 2px; 
      border: 1px solid #ddd; 
      color: #000; 
      background-color: #fff; 
      display: inline-block; 
      width:120px 

     }

https://jsfiddle.net/q3jgytoq/2/

источник

2016-02-19 12:33:21 maioman

** Разница исходит из пространства, используемого буквой D ** и **, а затем M ** на следующей строке. установка фиксированной ширины в px не является хорошей идеей. если изменение текста или размер шрифта увеличены, он сломается, вы можете использовать em. :) –

это было бы, если бы вы использовали моноширинный семейный шрифт без какой-либо ширины;) http://codepen.io/anon/pen/JGqLgJ –

@GCyrillus лучше фиксировала фиксированную ширину, отвечающую шрифту; но оставляя эти ячейки таблицы для изменения размера в зависимости от внутреннего диапазона, конечно, я бы избегал;) – maioman

HTML CSS предотвращает разрыв контейнеров с диапазоном

ответ

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