Ответ 1
добавить overflow: hidden
в родительский <div>
- http://jsfiddle.net/5AVA8/
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
У меня есть div, содержащий несколько других div с установкой float: left. Теперь я хочу фрейм вокруг всех из них, поэтому я помещаю границу в родительский div, но плавающие "текут" из кадра...
CSS
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}
Html:
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
</div>
Что я могу сделать (в CSS), чтобы держать их внутри родительского фрейма?
добавить overflow: hidden
в родительский <div>
- http://jsfiddle.net/5AVA8/
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
Вы не очищаете поплавки. Если вы измените свой код на это, он решит вашу проблему.
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}
.clear {
clear: both;
}
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div class="clear"></div>
</div>
См. пример, который я здесь установил - http://jsfiddle.net/spacebeers/RQNDr/
Для получения дополнительной информации о свойствах clear - http://css.maxdesign.com.au/floatutorial/
Вы должны "очистить float", существуют различные методы "очистки флота". Некоторые решения включают только CSS, мое предпочтительное решение (не нравится некоторым людям, поскольку добавляет дополнительную разметку) заключается в добавлении "очищающего div", оно работает следующим образом:
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div style="clear:both"></div>
</div>
См. вторую из последней строки.