私の要素を親幅に広げる

私は3つの要素を画面の幅に広げようとしています。私は異なる方法を試しましたが、inline-blockを使用すると、2番目の要素は中央になりません。 inline-blockを省略すると、3番目の要素が次の行に表示されます。助言がありますか？あなたがこれを行うには、以下のCSS3を使用することができます私の要素を親幅に広げる

<html> 
 
<head> 
 
    <style> 
 
     * { 
 
      margin: 0px; 
 
      padding: 0px; 
 
     } 
 
     .base { 
 
      display: block; 
 
      height: 200px; 
 
      background-color: #eeeeee; 
 
     } 
 
     .container { 
 
     } 
 
     .shape { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #ff0000; 
 
     } 
 
     .container { 
 
     } 
 
     #left { 
 
      float: left; 
 
     } 
 
     #center { 
 
      margin: auto; 
 
     } 
 
     #right { 
 
      float: right; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="base"> 
 
     <div class="container"> 
 
      <div class="shape" id="left"></div> 
 
      <div class="shape" id="center"></div> 
 
      <div class="shape" id="right"></div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-08-27 devDesigner

CSSソリューションdisplay:flex;

<html> 
 
<head> 
 
    <style> 
 
     .base { 
 
      
 
      height: 200px; 
 
      background-color: #eeeeee; 
 
      display:flex; 
 
      justify-content:space-between; 
 
      
 
     } 
 

 
     .shape { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #ff0000; 
 
      align-self: flex-end; 
 
     } 
 
    
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="base"> 
 

 
      <div class="shape" id="left"></div> 
 
      <div class="shape" id="center"></div> 
 
      <div class="shape" id="right"></div> 
 
     
 
    </div> 
 
</body> 
 
</html>

出典

2017-08-27 11:18:16

ありがとう、それは働いて、コードはこのようにもっときれいです。どのようにブロックを灰色の親の底に整列させるつもりですか？コンテナの位置をabsoluteに変更し、bottomを0に設定すると、レイアウトが再び乱れてしまいます。 – devDesigner

@devDesigner私は自分の答えを更新しました。今すぐチェックしてください。 –

ありがとうDinesh、あなたは最高です！ – devDesigner

。

* { 
 
      margin: 0px; 
 
      padding: 0px; 
 
     } 
 
     .base { 
 
      display: block; 
 
      height: 200px; 
 
      background-color: #eeeeee; 
 
     } 
 
     .container { 
 
     } 
 
     .shape { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #ff0000; 
 
     } 
 
     .container { 
 
     display:flex; 
 
     justify-content:space-between; 
 
     }

<div class="base"> 
 
     <div class="container"> 
 
      <div class="shape" id="left"></div> 
 
      <div class="shape" id="center"></div> 
 
      <div class="shape" id="right"></div> 
 
     </div> 
 
    </div>

私はあなたが使用することをお勧め

* { 
 
      margin: 0px; 
 
      padding: 0px; 
 
     } 
 
     .base { 
 
      display: block; 
 
      height: 200px; 
 
      background-color: #eeeeee; 
 
     } 
 
     .container { 
 
     } 
 
     .shape { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #ff0000; 
 
     } 
 
     .container { 
 
      display:block; 
 
      text-align:center; 
 
     } 
 
     #left{ 
 
      float:left; 
 
     } 
 
     #right{ 
 
      float:right; 
 
     } 
 
     #center{ 
 
      display:inline-block; 
 
     }

<div class="base"> 
 
     <div class="container"> 
 
      <div class="shape" id="left"></div> 
 
      <div class="shape" id="center"></div> 
 
      <div class="shape" id="right"></div> 
 
     </div> 
 
    </div>

出典

2017-08-27 11:15:32

ありがとう、ありがとうございます！ – devDesigner

どうやってCSS（CSS3なし）でそれをすることができますか？ – dabadaba

@dabadabaは私のCSSソリューションをチェックします –

私の要素を親幅に広げる

答えて

関連する問題