divを使用してコンテンツを並べる

Question

私は2つを持っていますdivです。 1つのdivはヘッダーの内容を表し、その他はdivの内容を表します。両方の内容を並べて整列してほしいdivです。右側のdivの内容（詳細）は常に右側に表示されます。詳細コンテンツが適合しない場合は、extraコンテンツが次の行に表示されます。以下のようなFile4.pdfとFile5.pdfが収まらないので、次の行に進みます。

私はtableを使用して、これを行うことができたが、私は、テーブルの代わりにdivを使用したいと思います。ただし、内容が完全でない場合はdivを使用すると、コンテンツ全体が次の行に移動します。ここ

では、次のスタイルで、右側の要素のコンテナが必要になります

Answer 1

JSfiddle

float:left; 
width:calc(100% - 222px); /*the -222px is the width of the left element + the padding + the margin*/ 
overflow:hidden; 

---

全更新例である（jsfiddle提供から）

dl { 
 
    margin-bottom: 30px; 
 
} 
 
dl dt { 
 
    float: left; 
 
    font-weight: bold; 
 
    margin-right: 2px; 
 
    width: 200px; 
 
} 
 
dl dd { 
 
    margin: 2px 0; 
 
} 
 
.details-container { 
 
    float: left; 
 
    width: calc(100% - 222px); 
 
    overflow: hidden; 
 
}

<div style="float:left;padding-right:20px;"> 
 
    <dl> 
 
    <dt>Name:</dt> 
 
    <dd>Foo Bar</dd> 
 
    <dt>Date:</dt> 
 
    <dd>01/04/2017</dd> 
 
    </dl> 
 
</div> 
 
<div class="details-container"> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File1.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File2.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File3.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File4.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
</div>

Answer 2

これを達成するにはさまざまな方法がありますので、もっと正確にする必要があります。詳細については、1行に固定された要素数があるかどうかによって異なります応答性があるか、固定サイズの要素に含まれる何かの一部ですか？ divのリストが大きすぎるとスクロールが表示されますか？ここで

はいくつかの手がかりです：

• ギャビー別名G. Petrioliで言ったように高さがあれば、あなたが最も可能性の高いあなたが
• やりたいために、1つまたはあなたのdivの両方の周りにラッパーのdivが必要になりますコンテンツが新しい行になったときにスクロールバーに関係なく、両方のdivの高さを 'overflow：scroll'で同じ値に設定するだけです。スクロールバーが水平か垂直かを選択するには、具体的に 'overflow-x：scroll'または 'overflow-y：scroll'を使用します。
• まだ固定された高さ線があるが、それでも次元を定義し、 'overflow：hidden'を追加します。このようにして、折り返し部分のすべてが消えます。
• Gabrika G. Petrioliの例のように、 'overflow：hidden'を使用すると、折り返しコンテンツが新しいコンテンツに到達したときに折り返しdivのサイズが更新されないという問題を修正できます
• 1行にアイテムを強制的に（各「タイル」の内容を強制的にサイズ変更またはスクロールさせて）強制するには、次のようなレイアウトが必要です。要素は％で定義されています。これはより難しく、完全に答えるにはより正確な質問が必要です。

Answer 3

FlexBox ??

<div class="container"> 
<div class="left"> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value asd asd as das d</div> 
    </div> 
</div> 
<div class="right"> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value asd asd as</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value adasd</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
</div> 
</div> 

.container { 
    display: flex; 
} 

.item { 
    padding-bottom: 30px; 
} 

    .container .left { 
    display: flex; 
    align-items: center; 
    padding-right: 50px; 
    } 
    .container .right { 
     display: flex; 
     width: 70%; 
     flex-wrap: wrap; 
    } 

    .container .right .item { 
     width: 30%; 
    } 

作業例https://jsfiddle.net/494wrsyo/2/