css - 如何让我的文本在页面上呈现得更高？

Question

现在我希望文本“(även uppfinnare)”显示在第一行。现在执行它的 HTML 是

<div class="data-box">   
            <div class="personName"><strong>    
                3. Kee Marcello&nbsp;
             </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;      }

你能帮助我吗？谢谢

Answer 1

将 float left 应用于.personNameand.otherDetails并确保.data-box宽度几乎是750px( 300px + 450px) 或只是并排减小 2 的大小，div因此它们的宽度之和不超过 650px

Answer 2

它掉下来是因为它不适合容器。.data-box宽度为 650px，.personName并且.otherDetails宽度总和为 750px

Answer 3

你的两个元素都是浮动的（一个在右边，一个在左边），它们一起构成 750px。但容器元素只有 650px 宽。

当浮动元素空间不足时，它们会被洗牌到下一行。

要么使子元素更小（以适应 650 像素）或使父元素更大（750 像素）