HTML、CSS 3列レイアウトの表示：インラインブロックの間隔

3列のレイアウトで私を助けることができる人がいるかと思います。このコードを使用すると、折り返しdivとフッターの間には常にギャップがあります。私は本当にすべてのヒントに感謝https://jsfiddle.net/axee/czxwyzqL/3/HTML、CSS 3列レイアウトの表示：インラインブロックの間隔

HTML

<div id="header">Header</div> 
<div id="wrap"> 
    <div id="left"></div> 
    <div id="content"></div> 
    <div id="right"></div> 
</div>  
<div id="clear"></div> 
<div id="footer"></div>¨

CSS

*{ 
     box-sizing: border-box; 
     margin:0px; 
     padding:0px; 

     } 

     #header { 
      background-color:aqua; 
      height:75px; 
     } 

     #wrap div{ 
      display:inline-block; 
     } 

     #left{ 
      float:left; 
      width:25%; 
      height:15px; 
      background-color:red; 
     } 
     #content{ 
      width:50%; 
      height:15px; 
      background-color:blue; 
     } 
     .clear{ 
      clear:both; 
     } 

     #right{ 
      float:right; 
      width:25%; 
      height:15px; 
      background-color:green; 
     } 
     #footer{ 
      height:50px; 
      background-color:yellow; 
     }

は、ここで私はと周りに取り組んできたバイオリンです！

出典

2017-09-24 Kedge

あなたのフィドルにはいくつかのエラーがあります - https://jsfiddle.net/eatjy7cr/ #content divもフロートする必要があります。 –

コードを書き直しました。私はクラスの代わりにクラスを使用し、不要な部分を取り出しました。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
    margin: 0px; 
    } 
    .header { 
    background-color: aqua; 
    height: 75px; 
    } 
    .left { 
    float: left; 
    width: 25%; 
    height: 15px; 
    background-color: red; 
    } 
    .content { 
    float: left; 
    width: 50%; 
    height: 15px; 
    background-color: blue; 
    } 
    .right { 
    float: left; 
    width: 25%; 
    height: 15px; 
    background-color: green; 
    } 
    .footer { 
    height: 50px; 
    background-color: yellow; 
    } 
</style> 
</head> 
<body> 
    <div class="header">Header</div> 
    <div class="left"></div> 
    <div class="content"></div> 
    <div class="right"></div> 
    <div class="footer"></div> 
</body> 
</html>

この情報は役に立ちましたか？

出典

2017-09-24 20:58:32

それは完全に動作します。ありがとう！私は本当にあなたの助けに感謝します！ – Kedge

これはうまく使えて嬉しいです –

'inline-block'に設定された' #wrap div 'を削除することは、空白がどこから来たのかということを付け加える価値があります。それはインラインであり、これが空白を作成するので、wrap divの後の 'return'文字を画面に出力します。 – u02sgb

HTML、CSS 3列レイアウトの表示：インラインブロックの間隔

答えて

関連する問題