вы можете использовать двойные квадратные скобки для соответствия регулярному регулярному выражению, например. :
if [[ $1 =~ "foo.*bar" ]] ; then
(если версия bash, которую вы используете, поддерживает этот синтаксис)
По умолчанию изображение отображается inline, как буква.
Он сидит в той же строке, на которой сидят a, b, c и d.
Существует пространство ниже этой строки для descenders, которые вы найдете на таких буквах, как f, j, p и q.
Вы можете отрегулировать vertical-align
изображения, чтобы разместить его в другом месте (например, middle
) или изменить display
, чтобы он не был встроен.
Я просто добавил float:left
в div, и он работал
Все, что вам нужно сделать, это назначить это свойство:
img {
display: block;
}
У изображений по умолчанию есть это свойство:
img {
display: inline;
}
Вы можете использовать несколько методов для этой проблемы, например
line-height
#wrapper { line-height: 0px; }
display: flex
#wrapper { display: flex; }
#wrapper { display: inline-flex; }
display:
block
, table
, flex
и inherit
#wrapper img { display: block; }
#wrapper img { display: table; }
#wrapper img { display: flex; }
#wrapper img { display: inherit; }
Можно также аннулировать высоту строки родителя:
#wrapper {
line-height: 0;
}
Все исправления: http://jsfiddle.net/FaPFv/
Другой вариант, предложенный здесь здесь , устанавливает стиль изображения как style="display: block;"
Я нашел, что он отлично работает, используя display: block; на изображении и вертикально-выровнять: верх; на текст.
.imagebox {
width:200px;
float:left;
height:88px;
position:relative;
background-color: #999;
}
.container {
width:600px;
height:176px;
background-color: #666;
position:relative;
overflow:hidden;
}
.text {
color: #000;
font-size: 11px;
font-family: robotomeduim, sans-serif;
vertical-align:top;
}
.imagebox img{ display:block;}
<div class="container">
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
<div class="imagebox">
<img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
</div>
</div>
или вы можете отредактировать код a JS FIDDLE
Чтобы удалить зазор под изображением, вы можете:
vertical-align: bottom;
vertical-align: top;
или vertical-align: middle;
display:block;
См. следующий код для живой демонстрации:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
Разрыв или дополнительное пространство под изображением не является ошибкой или проблемой, это поведение по умолчанию. Основная причина заключается в том, что изображения заменяются элементами ( см. MDN и W3C ). Это позволяет им «действовать как изображение» и иметь собственные собственные размеры, соотношение сторон ... Браузеры вычисляют свое свойство отображения inline
, но они придают им особое поведение, которое приближает их к элементам inline-block
(так как вы
Это также означает, что:
[...] когда изображения используются во встроенном контексте форматирования с выравниванием по вертикали: базовая линия, нижняя часть изображения будет отображаться на базовой линии контейнера. ( source: MDN , focus mine )
blockquote>Поскольку браузеры по умолчанию вычисляют свойство vertical-align для базовой линии, это значение по умолчанию поведение. На следующем изображении показано, где базовая линия находится по тексту:
[/g15]
Элементы, выровненные по базовой линии, должны содержать место для дескрипторов которые простираются ниже базовой линии (например,
j, p, g ...
), как вы можете видеть на приведенном выше изображении. В этой конфигурации нижняя часть изображения выравнивается по базовой линии, как вы можете видеть в этом примере:
div{border:1px solid red;} img{width:100px;height:auto;}
<div> <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender </div>
Вот почему поведение по умолчанию тега
<img>
создает пробел в нижней части его контейнера и почему изменение свойства вертикального выравнивания или свойства отображения удаляет его, как в следующей демонстрации:
div {width: 100px;border: 1px solid red;} img {width: 100px;height: auto;} .block img{ display:block; } .bottom img{ vertical-align:bottom; }
<p>Default:</p> <div> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With display:block;</p> <div class="block"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div> <p>With vertical-align:bottom;</p> <div class="bottom"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div>