複数行のテキストパディング

Question

私は、次の構造を有する：

<div class="1"> 
    <div class="2"> 
    2. 
    </div> 
    <div class="3"> 
    3. 
    </div> 
    <div class="4"> 
    very long line of text 
    </div> 
</div> 

のでdiv 1はdisplay: blockがあり、他のすべてはdisplay: inlineを持っています。 私の目標はそのように表示されているテキストのこの非常に長い列を作ることです。

2. 3. very long 
     line of text 

私はまたはinline-flexを作り、marginとtext-indentプロパティを設定しようとすると、それはちょっと私が欲しいものを行い、次のようにテキスト全体を1行下に移動します。

2. 3. 
very long 
     line of text 

これを正しく行うにはどうすればよいですか？

Answer 1

フレックスを使用してこれを解決し、コンテナの表示をフレックスにします。

は、より多くのあなたがこれを行うことができますがたくさんある、あなたのクラスは、文字（Which characters are valid in CSS class names/selectors?）

https://jsfiddle.net/cymozzeL/1/

.t1 { 
    display: flex; 
} 

で開始していることを確認し、

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

を見てください。

Answer 2

oldeとの互換性の理由でdisplay: flexを使用しない場合Rのブラウザでは、あなたは、インラインブロックそれらを作る一番上に垂直にそれらを整列させ、その後、それらの幅を取得するためのjQueryを使用して、DIV4の幅を計算することができます

jQuery(document).ready(function() { 
 
var width1 = $(".x1").innerWidth(); 
 
var width2 = $(".x2").innerWidth(); 
 
var width3 = $(".x3").innerWidth(); 
 
var width4 = (width1 - width2 - width3 - 8) + "px"; 
 
$(".x4").css("width", width4); 
 
});

.x2, .x3, .x4 { 
 
display: inline-block; 
 
vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="x1"> 
 
    <div class="x2"> 
 
    2. 
 
    </div> 
 
    <div class="x3"> 
 
    3. 
 
    </div> 
 
    <div class="x4"> 
 
    very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text 
 
    </div> 
 
</div>

（注：-8計算は試行錯誤によって行われます。これは、DIV4を次の行に分割するHTMLコード内の改行によって作成される空白のために必要です。