我有一张带有表格的HTML:
<div
class="currentDesignDiv"
style="margin-bottom:5px;">
<div>
<img
alt="Thumbnail"
src="http://www.propertyware.com/templates/
<bean:write name="currentTemplate" property="primaryKey"/>
/thumb.gif"/>
</div>
<div>
<table>
<tr>
<th>Your Current Design: </th>
<td>Template #:
<bean:write name="currentTemplate" property="primaryKey"/>
</td>
</tr>
<tr>
<th>Last Updated: </th>
<td>
<bean:write name="currentTemplate" property="modifiedByAsString"/>
</td>
</tr>
<tr>
<th>Total Pages: </th>
<td>
<bean:write name="numberOfPages"/>
</td>
</tr>
</table>
</div>
由这个CSS设计风格:
.currentDesignDiv{
background-color:#e7e7e7;
border:1px solid #9c9c9c;
padding:5px;
width:100%;
min-width:860px;
}
.currentDesignDiv div{
float:left;
width:33%;
}
.currentDesignDiv div table{
font-size:9pt;
text-align:left;
margin:17px;
}
.currentDesignDiv div:first-child img{
margin:17px;
width:80px;
}
在我的大显示器上看起来不错,但是当我更换到我的小显示器时,最右边的div
(其中有一个图像)漂浮在父div
之外。有人有解决方案吗?
答案 0 :(得分:23)
设置
overflow: auto;
为外部div。这应该使您的父div扩展,即使其子项具有浮动属性。 (IE有一些问题,但可以通过一些填充修复)
答案 1 :(得分:5)
也许尝试给外部div这个css ...
display:inline-block;
由于浮动元素实际上没有自己的任何布局,外部div就像一个空div,而不是伸展以适应其中的元素。
使外部div内联块将基本上使内部div占用外部div中的一些实际空间。
答案 2 :(得分:3)
我经常给:
<强>溢出:隐藏; 强>
当我提供溢出:自动; 时,我遇到了问题,有时外部div可能会显示滚动条。
答案 3 :(得分:1)
浮动父div。
这意味着浮动的子元素不会浮出它。
答案 4 :(得分:0)
这是一个经过修改的解决方案,可以帮助我以100%宽度的布局来排列3个具有图像背景和绝对文本的div。
<html>
<head>
<style>
#wrapper {position:relative; float:left; width:100%; height:50px; margin:50px 0 50px 0; background:#000;}
.box-fit {max-width:30%; height:100%; display:inline-block;}
#one {position:absolute; width:100px; height:50px; left:0; background:#2aa2fd;}
#two {position:absolute; width:100px; height:50px; left:50%; transform:translateX(-50%); background:#d4a900;}
#three {position:absolute; width:100px; height:50px; right:0; background:#a7ca48;}
.box-text {position:absolute; width:auto; height:auto; font-size:1em; color:#636363; left:10px; bottom:4px;}
</style>
</head>
<body>
<div id='wrapper'>
<div id='one' class='box-fit'>
<div class='box-text'>
Text for div one!
</div>
</div>
<div id='two' class='box-fit'>
<div class='box-text'>
Text for div two!
</div>
</div>
<div id='three' class='box-fit'>
<div class='box-text'>
Text for div three!
</div>
</div>
</div>
</body>
</html>