Inline-блоки не будут выравниваться, если оба не содержат текст

Question

Inline-блоки не будут выравниваться, если оба не содержат текст

0

Привет, у меня есть две коробки одинакового размера, но по какой-то причине они не останутся на одной и той же "линии", в одном окне содержится изображение, другое - текст. Замена изображения с текстом заставляет их выравниваться так, как я хочу, чтобы они были. Однако, не имея никакого текста в коробке, они не выравниваются.

http://jsfiddle.net/U3b8r/1/

<div class="boxbox">
  <sam-box class="box clickable no-padding" base="170" width="1" height="1">
    <a href="http://placekitten.com/160/160"><img src="http://placekitten.com/160/160"></a>
  </sam-box>
  <sam-box class="box clickable no-padding" base="170" width="1" height="1">
    This is a box  
  </sam-box>

Я использую ящик sam для пользовательских измерений, могу вас заверить, что размер обоих элементов одинаковый (174px, если быть точным).

swissnetizen 20 фев. 2014, в 14:07

Источник

0

Что это за элемент sam-box ?
Wez 20 фев. 2014, в 12:15
0

лучше использовать float: left.
richa_pandey 20 фев. 2014, в 12:16
0

Sam-box - это пользовательский элемент, который позволяет настраивать единицы измерения. github.com/samarthwiz/sam-box
swissnetizen 20 фев. 2014, в 15:58

Показать ещё 1 комментарий

Теги:

html

css

6 ответов

0

Используйте float left и установите ширину и высоту div. Попробуйте, как показано ниже, и измените ваши потребности.

.box {
    width:170px;
    height:170px;
    float:left;     
    border-radius: 10px;
    margin: 5px;
    font-weight: 400;
    border: 2px solid transparent;

}

Sbpro 20 фев. 2014, в 11:02

0

поскольку вы уже display: inline-block; свойства Css display: inline-block; то нет необходимости определять свойство float: left.

вам нужно добавить свойство ниже в свой класс ящиков

.box {
  padding: 10px;
  background-color: transparent;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;
    vertical-align:top; /*only add this will work even if the image size is smaller*/
  font-weight: 400;
  border: 2px solid transparent;
}

Kheema Pandey 20 фев. 2014, в 10:02

0

Добавить float: осталось для ваших боксов

.box {
float:left;
}

Sarath 20 фев. 2014, в 09:55

0

Вы можете обнаружить, что добавление overflow:hidden; ваш класс .box исправляет вашу проблему - http://jsfiddle.net/U3b8r/4/

Wez 20 фев. 2014, в 09:50

0

просто добавьте float: слева в ваш класс.box

float:left;

FIDDLE

Patrick 20 фев. 2014, в 09:23

Ещё вопросы

Sam-box - это пользовательский элемент, который позволяет настраивать единицы измерения. github.com/samarthwiz/sam-box

Paulie_D · Accepted Answer · 2014-02-20T10-20-00.000Z

Вам просто нужно использовать vertical-align:top; на встроенных блочных элементах. О, и "пользовательские" элементы, вероятно, не будут проверяться, и у вас могут возникнуть проблемы с x-браузером.

JSFiddle

CSS

.box {
  padding: 10px;
  background-color: transparent;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;

  vertical-align:top;

  font-weight: 400;
  border: 2px solid transparent;
}

Я думаю, что они будут отлично работать при использовании полифилла, кстати, проверенного на Safari, Chrome, Firefox.
Кросс-браузер ... что может работать в Chrome, а не в IE. Если вам нужно использовать polyfill, потому что вы используете «пользовательские» элементы, я думаю, что это больше, чем требуется, потому что в спецификации уже есть какие-то совершенно элементы.