现在我希望文本“(ävenucfinnare)”显示在顶行。现在这样做的HTML是
<div class="data-box">
<div class="personName"><strong>
3. Kee Marcello
</strong></div>
<div class="otherDetails">(även uppfinnare)</div>
<table border="0"><tr><td></td><td>Telefon</td><td>123</td></tr>
<tr><td></td><td>Fax</td><td>123</td></tr>
<tr><td></td><td>E-post</td><td>123</td></tr>
<tr><td>null</td><td>Referens</td><td></td></tr>
</table>
</div>
相关的CSS是
.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
.personName { float:left; width:300px; }
.otherDetails { float:right; width:450px; }
你能帮帮我吗?感谢
答案 0 :(得分:1)
将浮动左侧同时应用于.personName
和.otherDetails
,并确保.data-box
宽度几乎为750px
(300px + 450px
)或仅缩小2并排div
因此它们的宽度之和不大于650px
答案 1 :(得分:1)
它掉下来因为它不适合容器。 .data-box
宽度为650像素,.personName
和.otherDetails
宽度总和高达750像素
答案 2 :(得分:1)
你的元素都浮动(一个向右,一个向左),它们一起组成750px。但容器元素只有650像素宽。
当浮动元素空间不足时,它们会被拖曳到下一行。
使子元素变小(适合650px)或使父元素变大(750px)