Получить родительское пустое пространство

У меня есть много элементов с заголовком изображения со статической высотой и некоторым текстом ниже. Цель состоит в том, чтобы получить полную высоту .outer как элементы в строке с ней. Мне нужен этот текст, чтобы получить ширину изображения и высоту, чтобы она была полной, как может быть. This is what i have achieved at the moment.
CSS:Получить родительское пустое пространство

.outer { 
    display: inline-block; 
} 
.inner { 
    background: green; 
    display: table-caption; 
} 
.inner>img{ 
    height: 200px; 
}

HTML:

<div class="outer"> 
    <div class="inner"> 
     <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg"/> 
     <p>Useless Text.</p> 
    </div> 
</div>

источник

2015-08-01 Gonchar Denys

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

@ GoncharDenys, ты совершенно прав - я имел в виду [JSFiddle] (http://jsfiddle.net). Прости. –

Я добавил его в код, ссылка находится на описании. –

Здесь важна вертикальная выровняемость: верхняя; Я дал фиксированную ширину, но вы можете дать ширину в процентах.

body { 
 
    width: 100%; 
 
} 
 
.outer { 
 
    display: inline-block; 
 
    width: 90%; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background: green; 
 
    width: 290px!important; 
 
    padding-right: 20px; 
 
    padding-left: 15px; 
 
} 
 
.inner>img { 
 
    height: 200px; 
 
} 
 
.inner>p { 
 
    width: inherit; 
 
} 
 
.inner>img, 
 
.inner>p { 
 
    display: block; 
 
}

<body> 
 
    <div class="outer"> 
 
    <div class="inner"> 
 
     <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" /> 
 
     <p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never 
 
     knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file 
 
     some of these away for later use.</p> 
 
    </div> 
 

 

 
    <div class="inner"> 
 
     <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" /> 
 
     <p>This is an awesome text, but i want my element get height of left space up of my image.</p> 
 
    </div> 
 

 

 
    <div class="inner"> 
 
     <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" /> 
 
     <p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never 
 
     knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file 
 
     some of these away for later use.</p> 
 
    </div> 
 

 
    </div> 
 

 
</body>

источник

2015-08-04 12:16:36

http://codepen.io/anon/pen/jPdNjy?editors=100 –

Ваш код указывает мне добавить 'vertical align: top;' на 'inline-block' элементы, которые как бы исправить мою проблему. В вашем коде есть проблема с фиксированной шириной, которая нам не нужна. http://codepen.io/Crackeraki/pen/BNMBeo?editors=110 Вот решение. Еще одна вещь может помочь моей проблеме, что зеленое поле будет до конца, но даже без него все в порядке. –

вот моя обновленная ручка http://codepen.io/anon/pen/NqoKQR?editors=110 –

Я сделал некоторые изменения в свой код, я добавил класс table-div и класс table-row и завернутые те div.outer в div.table-div и div.table-row. Вы можете увидеть его здесь: http://codepen.io/anon/pen/XboROq?editors=110. Надеюсь, это то, что вы ищете.

источник

2015-08-01 14:53:21 Lucian

Вы удалили 'display: inline-block', что важно для перемещения коробки вниз, когда экран меньше. На большом экране это то, что мне нужно. –

Почему 'display: inline-block;' важно? – Lucian

Например, в меньшей ширине мне нужно 2 '.outer' вверх и 1 вниз. На Большем экране мне нужно 8 '.outer' и т. Д. –

Получить родительское пустое пространство

ответ

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