同じ結果をインラインで達成できますか？

inline、またはinline-blockで正確な結果が得られるかどうか疑問に思っている場合は、floatのようになります。同じ結果をインラインで達成できますか？

（http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_floatから取られた）次のコードを参照してください：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
    
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © W3Schools.com</footer> 
 

 
</div> 
 

 
</body> 
 
</html>

出典

2016-10-19 Herrsocke

それでも場合、inlineとinline-block propoertiesはそうすることを意図していません。これらの値は、要素がテキストの流れの内側に配置され、このテキストの内部で動作するか、またはテキストと整列している間にブロックされたプロパティを維持するという表示プロパティを表します。このようなレイアウトを構造化するために使用されるべきではありません。

出典

2016-10-19 23:40:38

ちょうど私ができることはあなたがすべきことではないということです。私は答えを使うのではなく、フロートに固執します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
    
 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<table> 
 
<tr><td colspan="2"> 
 
<header> 
 
    <h1>City Gallery</h1> 
 
</header> 
 
    </td></tr> 
 
<tr><td> 
 
<nav> 
 
    <ul> 
 
    <li><a href="#">London</a></li> 
 
    <li><a href="#">Paris</a></li> 
 
    <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
</nav> 
 
</td><td> 
 
<article> 
 
    <h1>London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 
</td></tr> 
 
<tr><td colspan="2"> 
 
<footer>Copyright © W3Schools.com</footer> 
 
</td></tr> 
 
</table> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-10-19 23:42:00

テーブルなしでそれを行う方法はありますか？ – Herrsocke

同じ結果をインラインで達成できますか？

答えて

関連する問題