HTML/CSSの固定行内の浮動小数点列

-1

マイページには要素のコレクションが含まれています。各要素は固定高さの行です。行内では、コンテンツブロックは行の一部のみを満たす必要があります。これは行全体、左部分のみ、右部分のみ、または中央のどこかにすることができます。HTML/CSSの固定行内の浮動小数点列

これをhtmlで描画するには、2つのバッファdiv（コンテンツの左右の部分）を使用することを考えていました。どのくらいの幅のバッファがプログラムで（角を持って）設定されるかに注意してください。そのため、CSSに設定する必要はありません。これは、インラインスタイルのPLNKRでハードコードされているだけです。

ここは私のスタートplnkrです。

私は同様の質問hereを尋ねましたが、行の3つのバリエーション（左半分、右半分、全幅）を必要としていました。

<div class="employee-container"> 
    <div class="left-buffer"></div> 
    <div class="content"> 
     <p>Show me full width</p> 
    </div> 
    <div class="right-buffer"></div> 
</div> 
<div class="employee-container"> 
    <div class="left-buffer"></div> 
    <div class="content"> 
     <p>Show me floating left</p> 
    </div> 
    <div class="right-buffer"></div> 
</div> 
<div class="employee-container"> 
    <div class="left-buffer"></div> 
    <div class="content"> 
     <p>Show me floating right</p> 
    </div> 
    <div class="right-buffer"></div> 
</div> 
<div class="employee-container"> 
    <div class="left-buffer"></div> 
    <div class="content"> 
     <p>Show me in the middle</p> 
    </div> 
    <div class="right-buffer"></div> 
</div>

出力は以下のようになりますが、右または左に要素をフローティングするオプションを有することに加えて、それが途中で浮くことができました。

出典

2016-08-22 Ryan Langton

：

.left{ 
    float: left; 
    width: 33.33%; 
} 
.right{ 
    float: right; 
    width: 33.33%; 
} 
.center{ 
    margin: auto; 
    width: 33.33%; 
} 
.right-buffer { 
    clear:both; 
}

それをチェックアウトし、私はあなたのフィードバックをお聞かせください。ありがとう！

/* Styles go here */ 
 

 
.employee-container { 
 
    margin-bottom: 6px; 
 
    margin-top: 6px; 
 
    border: 1px solid lightsteelblue; 
 
} 
 
.employee-container > div.content { 
 
    padding: 15px; 
 
    background-color: lightsteelblue; 
 
} 
 
.left{ 
 
    float: left; 
 
    width: 33.33%; 
 
} 
 
.right{ 
 
    float: right; 
 
    width: 33.33%; 
 
} 
 
.center{ 
 
    margin: auto; 
 
    width: 33.33%; 
 
} 
 
.right-buffer { 
 
    clear:both; 
 
}

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <div class="employee-container"> 
 
      <div class="left-buffer"></div> 
 
      <div class="content"> 
 
      <p>Show me full width</p> 
 
      </div> 
 
      <div class="right-buffer"></div> 
 
     </div> 
 
     <div class="employee-container"> 
 
      <div class="left-buffer"></div> 
 
      <div class="content left"> 
 
      <p>Show me floating left</p> 
 
      </div> 
 
      <div class="right-buffer"></div> 
 
     </div> 
 
     <div class="employee-container"> 
 
      <div class="left-buffer"></div> 
 
      <div class="content right"> 
 
      <p>Show me floating right</p> 
 
      </div> 
 
      <div class="right-buffer"></div> 
 
     </div> 
 
     <div class="employee-container"> 
 
      <div class="left-buffer"></div> 
 
      <div class="content center"> 
 
      <p>Show me in the middle</p> 
 
      </div> 
 
      <div class="right-buffer"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

ここ

出典

2016-08-22 17:57:35 kukkuz

@ Ryan Langtonこの回答があなたが期待したものかどうかお知らせください。ありがとう！ – kukkuz

素晴らしい答え、これは素晴らしいです！なぜ私の質問が票を落としているのか分かりません。ありがとうございました！ –

クール...それがあなたを助けてくれたことを知りました。 :)あなたはupvote /応答を受け入れることができますか？ありがとう！ – kukkuz

は、私はよくあなたの要求を理解したいと考えています。私はフレックスボックスでPlunkerで作った。使用してdiv要素を中央に、右/左margin:autoそれを置くためにfloat Sを使用し

http://plnkr.co/edit/IxCupfRaXUWYlkVhsqga

<style> 
     .flex{display:flex;} 
     .flex > *{flex:1;padding:2px} 
</style> 

<body> 
    <h1>Hello Plunker!</h1> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-4"> 
     <div class="employee-container"> 
     <div class="left-buffer"></div> 
     <div class="content"> 
     <p>Show me full width</p> 
     </div> 
     <div class="right-buffer"></div> 
    </div> 
    <div class="flex"> 
    <div class="employee-container"> 
     <div class="left-buffer"></div> 
     <div class="content"> 
     <p>Show me floating left with a very big text nd it will adjust automatically</p> 
     </div> 
     <div class="right-buffer"></div> 
    </div> 
    <div class="employee-container"> 
     <div class="left-buffer"></div> 
     <div class="content"> 
     <p>Show me floating right</p> 
     </div> 
     <div class="right-buffer"></div> 
    </div> 
    <div class="employee-container"> 
     <div class="left-buffer"></div> 
     <div class="content"> 
     <p>Show me in the middle small text</p> 
     </div> 
     <div class="right-buffer"></div> 
    </div>   
    </div> 
     </div> 
     </div> 
    </div> 

    </body>

出典

2016-08-22 17:29:22

最後の3行が同じ行にマージされているので、これは適切ではありません。私は自分のスペースに残すために各行を必要としますが、行に表示される内容は変わります。私は説明しようとする元の質問に画像を追加しました。 –

（イラストのためのいくつかのボーダー/パディングを追加しました）私のコードとplunkerリンクは、それはあなたを助けることができるかもしれである -

リンクPlunker

HTMLコード

<body> 
    <h1>Hello Plunker!</h1> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="employee-container"> 
          <div class="left-buffer"></div> 
          <div class="content"> 
           <p>Show me full width</p> 
          </div> 
          <div class="right-buffer"></div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="employee-container leftDiv"> 
          <div class="left-buffer"></div> 
          <div class="content"> 
           <p>Show me floating left</p> 
          </div> 
          <div class="right-buffer"></div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="employee-container rightDiv"> 
          <div class="left-buffer"></div> 
          <div class="content"> 
           <p>Show me floating right</p> 
          </div> 
          <div class="right-buffer"></div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12 centeredDiv"> 
         <div class="employee-container"> 
          <div class="left-buffer"></div> 
          <div class="content"> 
           <p>Show me in the middle</p> 
          </div> 
          <div class="right-buffer"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSSコード

.employee-container { 
     margin-bottom: 6px; 
     margin-top: 6px; 
    } 
    .employee-container > div { 
     padding: 3px; 
     background-color: lightsteelblue; 
    } 
    .centeredDiv{ 
     position:relative; 
    } 

    .centeredDiv > .employee-container{ 
     position:absolute; 
     width:50%; 
     left:25%; 
    } 

    .rightDiv{ 
     width:50%; 
     float:right; 
    } 

    .leftDiv{ 
     width:50%; 
     float:left; 
    }

出典

2016-08-22 18:25:52

HTML/CSSの固定行内の浮動小数点列

答えて

関連する問題