残りのスペースを埋めるために残りのスペースを埋めるようにしてください。

https://stackoverflow.com/a/1032952/288568と同じように表示するにはどうすればいいですか？ただし、正しい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

を使用して、ここで、別のオプションでしょうか？ – 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は、左の幅が180ピクセルであることが重要であり、その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

cal（100％~180px）;以前はそれを見たことがありません。フレックスボックスですてきな解決策も！ – 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

残りのスペースを埋めるために残りのスペースを埋めるようにしてください。

答えて

関連する問題