CSS с Image Div и Text Div для одного и того же базового уровня

Я хотел бы разместить Div для изображения и Div для текста на одной базовой линии. Ниже приведен мой пример кода и JSFiddle.

http://jsfiddle.net/xLrf7pyt/

введите здесь описание изображения

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

<style>
    .wrap { width: 500px;}
    .img { float: left; }
    .txt { }
</style>

============ Обновление =================

Первоначально между изображением (логотип в левом верхнем углу) и текстом (навигация в правом верхнем углу) должно быть пустое пространство с той же базовой линией, что и логотип изображения.


css baseline
person Jay    schedule 09.01.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Удалите float из элемента .img и вместо этого установите .img и .txt на display: inline:

.img, .txt { 
    display: inline;
}

Затем установите .txt, чтобы иметь vertical-align из baseline:

.txt {
    vertical-align: baseline;
}

демонстрация JSFiddle.

введите здесь описание изображения

person James Donnelly    schedule 09.01.2015
comment
Спасибо за комментарий, все работает. Но, как я обновил, мне, возможно, придется использовать float, чтобы разместить изображение и текст в точном месте. Как использовать float с вашим решением. - person Jay; 09.01.2015
comment
@ Джей, возможно, лучшим решением было бы установить для элемента .wrap значение display: table с width равным 100%, а для элементов .img и .txt значение display: table-cell. Затем установите для элемента .txt значение text-align, равное right. - person James Donnelly; 09.01.2015
comment
@Jay: Обычно есть (более простой) способ позиционирования, чем плавающие элементы. - person jbutler483; 09.01.2015
comment
@JamesDonnelly Я проверил ваш комментарий, но он содержит две строки. jsfiddle.net/xLrf7pyt/3 - person Jay; 09.01.2015
comment
@Jay, это демонстрация JSFiddle, на которую я ссылался в своем ответе. - person James Donnelly; 09.01.2015
comment
@ jutler483 jutler483, если я использую позицию, мне, возможно, придется установить точные пиксели. Сайт будет отзывчивым, и я не хочу использовать условия для этого. - person Jay; 09.01.2015
comment
У вас display: text-cell вместо display: table-cell. jsfiddle.net/xLrf7pyt/5 - person James Donnelly; 09.01.2015

arrow_upward
0
arrow_downward

Использовать display:inline;

    .wrap { width: 500px;}
    .img { display:inline; }
    .txt { display:inline; }
<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

person Ahosan Karim Asik    schedule 09.01.2015