html + CSS - セルに複数の行のテキストがある場合の列の分割

Question

特定のdivのテキスト行を分割しようとしています（意図した動作は2つの列を持つ表に似ています）。

私は最初の列を固定幅にし、2番目の列に残りのスペースを使用します。私の問題は、右の列に長いテキストがあり、ブラウザウィンドウのサイズを変更すると（たとえば、携帯電話を使用しているかのように）、右の列が下に移動することです。

これは意図した動作である：私は小さい解像度に私のブラウザウィンドウのサイズを変更した後を得る何

------------------------------------------------------------------------- 
Text 1 | This is a long text. This is a long text. This is a long text. 
     | This is a long text. This is a long text. 
------------------------------------------------------------------------- 

はこれです：

------------------------------------------------------------------------- 
Text 1 
This is a long text. This is a long text. This is a long text. This is a 
long text. This is a long text. 
------------------------------------------------------------------------- 

私が使用しているコードは以下の通りであります：

div.columns { width: 50%; margin: auto; } 
 

 
div.columns div { float: left; } 
 
div.columns div.col1 { width: 50px; } 
 
div.columns div.col2 { width: 800px; } 
 

 
div.clear { clear: both; }

<div class="columns"> 
 
    <div class="col1">Text 1</div> 
 
    <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div> 
 
</div> 
 
<div class="clear"></div>

これは、ウィンドウサイズが850px未満の場合に発生します。どのようにしてcol2の幅を、col1の幅を50pxに設定した後に残すものを指定して、意図した動作を維持することができますか？

Answer 1

calcを使用してください。したがって、親要素の100％サイズから左側要素の幅を差し引いた幅の右端の要素を持つことができます。あなたのdiv.columns div.col2ためので

：

div.columns div.col2 { 
    width: calc(100% - 50px); 
} 

Fiddle

Answer 2

私は、これはそれがcalcを必要としないよう、より良い解決策だと思う：

だけの列の親のdivとdisplay: table-cell;ためdisplay: table;を使用次のようになります。

div.columns { 
 
    display: table; width: 50%; margin: auto; border: 1px solid black; 
 
} 
 
    
 
div.columns div.col1 { display: table-cell; width: 50px; background: #f0fff0; } 
 

 
div.columns div.col2 { display: table-cell; background: #f4f4ff; } 
 
/*no width required for second div, it will auto-fill remaining width */

<div class="columns"> 
 
    <div class="col1">Text 1</div> 
 
    <div class="col2">This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.</div> 
 
</div> 
 
<!--<div class="clear"></div> *** not required! -->