使右div充滿剩餘空間，但首先在HTML代碼中

如何才能完成與https://stackoverflow.com/a/1032952/288568中相同的外觀，但右邊的div是HTML中的第一個（所以它在第一次顯示時顯示爲一個手機，我左右堆疊在一起）？使右div充滿剩餘空間，但首先在HTML代碼中

<html> 
 

 
<head> 
 
\t <title>This is My Page's Title</title> 
 
\t <style type="text/css"> 
 
\t \t #left { 
 
\t \t \t float:left; 
 
\t \t \t width:180px; 
 
\t \t \t background-color:#ff0000; 
 
\t \t } 
 
\t \t #right { 
 
\t \t \t width: 100%; 
 
\t \t \t background-color:#00FF00; 
 
\t \t } 
 
\t </style> 
 
</head> 
 

 
<body> 
 
\t <div> 
 
\t \t <div id="right"> 
 
\t \t \t right 
 
\t \t </div> 
 
\t \t <div id="left"> 
 
\t \t \t left 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 

 
</html>

來源

2016-10-29 Alex

是很重要的是左側的寬度是180像素是另一種選擇，在這裏？ – natel

如果使用float，將它添加到您的#right規則

float: right; 
width: calc(100% - 180px);

<html> 
 

 
<head> 
 
    <title>This is My Page's Title</title> 
 
    <style type="text/css"> 
 
    #left { 
 
     float: left; 
 
     width: 180px; 
 
     background-color: #ff0000; 
 
    } 
 
    #right { 
 
     float: right; 
 
     width: calc(100% - 180px); 
 
     background-color: #00FF00; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <div id="right"> 
 
     right 
 
    </div> 
 
    <div id="left"> 
 
     left 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

flexbox將利用其order財產

<html> 
 

 
<head> 
 
    <title>This is My Page's Title</title> 
 
    <style type="text/css"> 
 
    .wrapper { 
 
     display: flex; 
 
    } 
 
    #left { 
 
     width: 180px; 
 
     order: 1; 
 
     background-color: #ff0000; 
 
    } 
 
    #right { 
 
     flex: 1; 
 
     order: 2; 
 
     background-color: #00FF00; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div id="right"> 
 
     right 
 
    </div> 
 
    <div id="left"> 
 
     left 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-10-29 09:51:06 LGSon

calc（100％ - 180px）;以前從未見過。 Flexbox也是不錯的解決方案！ – natel

#left { 
 
    width: 20%; 
 
    background-color: #ff0000; 
 
} 
 
#right { 
 
    float: right; 
 
    width: 80%; 
 
    background-color: #00FF00; 
 
}  \t

<html> 
 
<head> 
 
\t <title>This is My Page's Title</title> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t <div id="right"> 
 
\t \t \t right 
 
\t \t </div> 
 
\t \t <div id="left"> 
 
\t \t \t left 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2016-10-29 09:38:11 natel

使右div充滿剩餘空間，但首先在HTML代碼中

回答

相關問題