HTML並排的div，而一個有固定寬度，第二個適合剩餘空間

<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:rgb(150,200,255); margin:3px ; height:50px; width:100%px"> <font size=6> <center> <b> 123123123123123123123123 </b> </center></font> </div> <div style="background-color:rgb(180,215,255); display: inline-block; float:left; width:300px; height:90vh; " > aasdasdasdasdasdasdasdasdasd <ol> <li> 11111111 </li> <li> 222222222222222222222222222222 </li> <li> 3333333333333333 </li> </div> <div style="float:left; display: table-cell; vertical-align: top;"> aaaaaa aaaaa aaaaaa aaaaa aaaaaa </div>

您只需要浮動其中一個div標籤。您也可以擺脫表格樣式顯示CSS。正如其他意見所述，您不想使用<font>和<center>標籤。他們被剝奪並不再被支持。

<div style="background-color:rgb(150,200,255); margin:3px ; height:50px; width:100%;"> 
    <b> 123123123123123123123123 </b> 

</div> 

<div style="background-color:rgb(180,215,255); display: inline-block; float:left; width:300px; height:90px;"> 
    aasdasdasdasdasdasdasdasdasd 
    <ol> 
     <li> 11111111 </li> 
     <li> 222222222222222222222222222222 </li> 
     <li> 3333333333333333 </li> 
    </ol> 
</div> 

<div> 
    aaaaaa aaaaa aaaaaa aaaaa aaaaaa 
    aaaaaa aaaaa aaaaaa aaaaa aaaaaa 
    aaaaaa aaaaa aaaaaa aaaaa aaaaaa 
    aaaaaa aaaaa aaaaaa aaaaa aaaaaa 
    aaaaaa aaaaa aaaaaa aaaaa aaaaaa 

</div>

來源

2015-11-23 21:53:50

如果字體和中心仍然工作，他們做得很好，爲什麼我應該停止使用它們？我應該用什麼來代替？ – MarioPL98

@ MarioPL98因爲它*不適用於所有瀏覽器。這裏有一些很好的閱讀它在這裏：http://www.htmlcodetutorial.com/character_famsupp_92.html和這裏http://www.w3schools.com/tags/tag_font.asp –

當然，對於更長的段落，我使用CSS格式。根據W3，所有最流行的瀏覽器仍然支持字體標籤。 – MarioPL98

我通常把我所有的風格在CSS

body { 
 
    margin: 0; 
 
} 
 
.header { 
 
    background-color:rgb(150, 200, 255); 
 
    height:50px; 
 
    width:100%; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
.left { 
 
    background-color:rgb(180, 215, 255); 
 
    float:left; 
 
    width:300px; 
 
    height: 90vh; 
 
} 
 
.content { 
 
    float:right; 
 
    width: calc(100% - 300px); 
 
}


 

 
<div class="header">123123123123123123123123</div> 
 
<div class="left">aasdasdasdasdasdasdasdasdasd 
 
    <ul> 
 
     <li>11111111</li> 
 
     <li>222222222222222222222222222222</li> 
 
     <li>3333333333333333</li> 
 
    </ul> 
 
</div> 
 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id nisi ultrices, egestas erat vitae, laoreet lorem. Suspendisse sed mi placerat dolor lacinia maximus. Nullam sem tellus, facilisis sed tristique in, faucibus eu ligula. In hac habitasse platea dictumst. Mauris sed ex id ipsum pharetra dignissim. Donec vitae pulvinar est. Suspendisse placerat turpis vel arcu semper vulputate. Cras laoreet purus ac facilisis sodales. Vestibulum blandit, justo sed porta bibendum, lectus nisi rhoncus tortor, quis dapibus urna nulla et nibh.</div>

來源

2015-11-23 22:02:30

這實際上是一項家庭作業，不需要製作更多文件。當然，在製作一個真正的網頁時，我會使用外部CSS。 – MarioPL98

HTML並排的div，而一個有固定寬度，第二個適合剩餘空間

回答

相關問題